elementui的upload组件如何一次上传多个图片?

Question

下面写的upload上传的代码，需求是一次上传多个图片，发送请求需要携带header参数，但是element的多选文件上传提交是发多次请求提交的。大神们有没有好的解决方法可以一次请求上传多个图片，麻烦详述一下 谢谢~
列表项目

 <el-upload
                  ref="upload"
                  class="upload-demo"
                  v-loading="loading"
                  :action="uploadurl"
                  :data="uploaddata"
                  :headers="uploadheader"
                  :auto-upload="false"
                  :multiple="true"
                  :limit="3"
                  :on-exceed="moreexcel"
                  :on-progress="uploadProgress"
                  :on-error="uploaderror"
                  :with-credentials="true"
                  drag
                  :before-upload="beforeAvatarUpload">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
     <div class= "el-upload__tip" slot="tip">只能上传.xls/xlsx文件，且单次不超过一个文件</div>
              </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="uploadeure()">确 定</el-button>
              <el-button @click="canceldialog()">取 消</el-button>
            </span>

Answer 1

<el-upload ref="upload" :action='uploadurl' :auto-upload="false"  :http-request="uploadFile" list-type="picture" :limit='3' :on-exceed="handleExceed" >
<el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;选取图片</el-button>
</el-upload>

  uploadFile(file) {
        this.fileData.append('files', file.file);
  },
  submitUpload() {
          this.loading = true;
          this.fileData = new FormData();
          this.$refs.upload.submit();
          // this.fileData.append('schoolId', 28);
          axios.post(this.uploadurl, this.fileData).then((res) => {
              if (res.data.code === 200 && res.data.data === 1) {
                this.dialogVisible = false;
                this.loading = false;
              } else {
                this.loading = false;
                this.$message.error(res.data.errMessage);
              }
          });
         }；

页面上用upload上传组件的http-reques事件自定义上传方式，然后在方法里面将上传的文件一个一个添加到fileData对象里面，然后通过表单提交的方式请求后端接口

Answer 2

一次请求的话需要自己基于xhr和files对象`FormData`进行封装，且需要服务端支持。

Answer 3

<el-upload multiple></el-upload>

多个图片会有多次请求