Upload多文件上传

HTML部分

  <Upload ref="affixUpload" :action="上传文件地址"  :multiple="true"
      accept="application/msword,application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel"
      :format="['docx','doc','pdf','xls','xlsx']"
       :on-format-error="verifyFormatError"
         :max-size="307200"
          :before-upload="beforeUpload"
           :default-file-list="affixData"
           :show-upload-list="false"
     >
     <Button class="upload-btn">添加</Button>
 </Upload>
<div style="width:400px;margin-top:15px;" >
    <ul class="file-list" v-for="(list,index) in uploadFile" :key="index">
          <li>文件名: <span style="font-size:15px;">{{ list.name }}</span> <Icon type="ios-close" size="20" style="float:right;line-height:1.6" @click="delFileList(index)"></Icon></li>
  </ul>
   <Button class="upload-btn" @click="handleUploadFileClick">上传文件</Button>
</div>

上述accept 目前限制的类型为 docx、doc、xls、xlsx等。如需要更多类型可以参考
type=file上传文件时accept限制文件类型
除此之外也可根据文件后缀名进行判断upload上传文件限制文件类型

JS部分

beforeUpload(file){
  // 上传之前 把需要上传的文件添加一个集合之中，避免文件单端逐个上传 导致多次请求影响性能 
  this.uploadFile.push(file);
  return false; // 避免直接上传
}
// 上传之前对所选文件 的删除
delFileList(index){
   this.uploadFile.splice(index, 1);
},
// 执行上传
handleUploadFileClick(){
  //创建 formData 对象
   let formData = new FormData();
     //多个文件上传
   for(var i=0; i< this.uploadFile.length; i++){  
      formData.append("filename["+i+"]",this.uploadFile[i].name);   // 文件名称  
      formData.append('type', '1'); // 后端需要的上传类型 根据后端需求 可自行决定是否需要
      formData.append("file["+i+"]", this.uploadFile[i]);  //文件流
  } 
}
this.$fetch({
   url:this.action,
  method:'post',
  data:formData 
}).then((res) =>{
  // 成功之后的操作
})