element ui多选图片，一次性上传

今天写项目用到了 element 的上传，要求是多选不限制上传数量，在使用时发现element都是一次一次调接口。在这里用到了http-request（覆盖默认的上传行为，可以自定义上传的实现），以及auto-upload：false（是否在选取文件后立即进行上传）来实现多选一次性上传。

html部分：

<el-upload
    class="upload-demo"
    ref="upload"
    action="http://xxx/uploadFileOSS"  //后端接口
    multiple
   :http-request="uploadFile"
   :file-list="fileList"
   :auto-upload="false"
 >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="saveEdit">提交</el-button>

js部分

data() {
    return {
       fileList: [],
    }
}
methods(){
 uploadFile(file) {
    this.fileList.push(file.file);//取到选取的文件
 },
 saveEdit(){
  this.$refs.upload.submit();
  let formData = new FormData();
   for (let i = 0; i < this.fileList.length; i++) {
      formData.append('file', this.fileList[i]);//循环添加到formData，传给后端
   }
  uploadFileOSS(formData).then(res => { // 请求接口
  	console.log(res)
  })
  this.fileList=[] //上传成功清空fileList
 }
}

本文地址：https://blog.csdn.net/huihuihaha222222/article/details/107233933