Element Upload上传多文件请求一次接口

Element Upload上传组件，在使用默认的情况下，多个文件上传是多次调用接口。想要多个文件只调用一个接口，就需要替换掉默认的上传方法。

<el-upload
        ref="upload"
        accept="image/jpg,image/png,image/jpeg"
        multiple
        :headers="upload.headers"
        action="#"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-change="handleFileChange"
        :auto-upload="false"
        :file-list="fileList"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将模板文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-link type="info" style="font-size:12px" @click="getPicTempate()">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“zip”格式文件！</div>
      </el-upload>

需要通过 on-change 钩子函数来对列表进行控制，获取文件列表

handleFileChange(file, fileList) {
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
      if (existFile) {
        this.$message.error('当前文件已经存在!');
        fileList.pop();
      }
      this.fileList = fileList;
    }

替换默认的提交方法

submitFileForm() {
      // this.$refs.upload.submit();
      let formData = new FormData()
      this.fileList.forEach(item => {
        formData.append('files', item.raw)
      })
      axios({
        url: process.env.VUE_APP_BASE_API + "/importImage",
        method: 'post',
        headers: {'Authorization': 'Bearer ' + getToken()},
        data: formData
      }).then((data) => {
        console.log(data)
        if (data&& data.code === 0) {
          this.upload.open = false;
          this.reset();
          // 消息提示
          this.$message({
            message: '文件上传成功',
            type: 'success'
            duration: 1500
          })
        } else {
          this.$message.error('文件上传失败')
        }
      })
    }

注释部分就是默认的提交方法，改为axios提交formdata

参考：https://www.cnblogs.com/soldier-cnblogs/p/14842110.html