移動端 input type=‘file‘ 自定義樣式、多圖表單上傳總結

實現效果如下圖：

 

 

具體代碼實現 如下：

setEvaluation.vue(僅包括圖片列表展示 及 自定義上傳按鈕):

<div class="eva_uploadImg">
  <div class="eva_loadImgList">
      <ul class="clearfix">
          <li class="fl eva_myImg" v-for="(item,index) in imgDatas" :key="index" >
              <img class="eva_imgTips" :src="item" alt="">
              <div class="eva_closBtn" v-show="imgDatas" @click="handlerRemoveClick(index)">+</div>
          </li>
          <li class="fl" v-show="imgDatas.length<6">
              <div class="eva_upLoadBtn" @click.stop="upLoad">
                  <img class="eva_cameraImg" src="@/assets/image/camera.png" alt="">
                  <span>添加照片</span>
              </div>
              <form action="" enctype='multipart/form-data' method="post"  target="uploadFrame">
                  <input
                      type="file"
                      accept="image/*" mutiple="mutiple"
                      @change="changeImage($event)"
                      ref="avatarInput"
                      id="avatarInput"
                      style="display:none"
                  >
              </form>
              <iframe id="uploadFrame" name="uploadFrame" style="display:none;"></iframe>  <!--解決form表單提交數據刷新問題 -->
          </li>
      </ul>
      <span class="eva_imgDataNum">{{imgDatas.length}}/6張</span>
  </div>
 </div>

提交按鈕：

<div class="eva_submit" @click.stop="handlerSubmitClick">提交</div>

css樣式匯總：

 .eva_uploadImg
    .eva_loadImgList
         .eva_myImg
             border-radius 10px;
             position:relative;
             margin: 30px;
             margin-left:0;
             &:nth-child(3n)
                 margin-right: 0;
             .eva_imgTips
                 width: 200px;
                 height 200px;
                 border-radius: 10px;
             .eva_closBtn
                 width: 50px;
                 height: 50px;
                 position: absolute;
                 top: -20px;
                 right: -20px;
                 font-size: 46px;
                 text-align:center;
                 line-height: 50px;
                 color: #fff;
                 border-radius: 100%;
                 background: rgba(55,55,55,.5);
                 transform: rotate(-45deg);
                 -ms-transform: rotate(-45deg);
                 -moz-transform: rotate(-45deg);
                 -webkit-transform: rotate(-45deg);
                 -o-transform: rotate(-45deg);
         .eva_upLoadBtn
             width: 200px;
             height: 200px;
             color: #999;
             border: 2px dashed #999;
             background: #F3F3F3;
             border-radius: 10px;
             margin: 30px 0;
             box-sizing: border-box;
             .eva_cameraImg
                 width: 64px;
                 height: 52px;
                 display:block
                 margin: 50px auto;
                 margin-bottom: 15px;
             span
                 display:block;
                 font-size:24px;
                 padding:5px 0;
                 text-align: center;
     .eva_imgDataNum
         display: block;
         text-align: right;
.eva_submit
    width: 100%;
    height:98px;
    background: #5b3719;
    color: #fff;
    font-size: 30px;
    line-height: 98px;
    text-align: center;
    position:fixed;
    bottom: 0;
    left: 0;
    right: 0;

data定義變量：

data(){
        return{
            orderId:null,
            evaluationList:[],
            commonContent:'',
            imgDatas:[], //存儲上傳的圖片數據
            orderItemId:null,
            filesArr: [],
            id:null
        }
    },

methods里change事件、提交事件方法實現：

 changeImage(e) {
// 上傳圖片事件
    let files = e.target.files;
     // 如果沒有選中文件，直接返回
    if (files.length === 0) {
        return;
    }
    if (this.imgDatas.length + files.length > 6) {
        this.$toast('最多只能上傳6張圖片！');
        return;
    }
    let reader;
    let file;
    let imgDatas = this.imgDatas;
    for (let i = 0; i < files.length; i++) {
        file = files[i];
        this.filesArr.push(file);
        reader = new FileReader();
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
        reader.onload = function(e) {
            // if (imgDatas.indexOf(this.result) === -1) { // 判斷數組里值相同的無法上傳，具體看自己需求
                imgDatas.push(this.result);
            // }
        };
        reader.readAsDataURL(file);
        }
    }
    e.target.value = ''// 清空value值防止 同一張圖片無法重復提交
 },
 // 提交
handlerSubmitClick(){
    if(this.commonContent.length > 500){
        this.$toast('您輸入的內容超出文字限制')
    }else if(this.commonContent == ''){
        this.$toast('評論失敗，文字內容必填哦！')
    }else if(this.imgDatas.length>0){
        /*表單上傳文件定義實例formData對象*/
        var formData = new FormData();
        /* this.filesArr 存儲上傳的圖片數據數組*/
        this.filesArr.forEach((file) => {
            /*遍歷 this.filesArr 添加到 formData對象里*/
            formData.append('upload', file);
        });
        /*formData對象里 需要傳給后台其他字段定義方式*/
        formData.append('orderItemId',this.orderItemId);
        if(this.id != null && this.id != 0){
            formData.append('id',this.id)
        }
        
        formData.append('content',this.commonContent);
        /* 發起請求、將formData對象 傳給后台*/
        axios({
            url:urlList.setCommentsInfo,
            method: 'POST',
            header:{
                'Authorization': '*****', //此為接口身份認證，具體實現看你們公司具體定義
                'content-type': 'multipart/form-data',
                'cookie': sessionStorage.getItem("cookieKey"), //讀cookie
            },
            data:formData
        }).then(res=>{
            if(res.data.code == 200){
                this.$toast('評論成功')
                if(this.$route.query.orderId){
                    this.$router.push({
                        path:'/orderList',
                        query:{
                            status:3
                        }
                    })
                }else{;
                    this.$router.go(-1)
                }
                
            }else if(res.data.code == 400){
                this.$toast(res.data.data)
            }else{
                this.$toast('服務器異常，評論失敗')
            }
        })
    }else{
        var params = {
            orderItemId:this.orderItemId,
            content:this.commonContent
        };
        this.$http.post(urlList.setCommentsInfo,params).then(res=>{
            if(res.data.code == 200){
                this.$toast('評論成功');
                if(this.$route.query.orderId){
                    this.$router.push({
                        path:'/orderList',
                        query:{
                            status:3
                        }
                    })
                }else{;
                    this.$router.go(-1)
                }
            }else if(res.data.code == 400){
                this.$toast(res.data.data)
            }else{
                this.$toast('服務器異常')
            }
        })
    }
    
}

以上代碼片段 直接根據自己公司需求改改就可以直接使用。今天就先到這里了。