elementui el-upload一次请求上传多个文件

在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用this.$refs.upload.submit();方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传:auto-upload=“false”

          
              :on-change="handleFileChange"
              :before-remove="handleFileRemove" 
              :auto-upload="false"
              :file-list="upload.fileList" 
              >
              选取文件
            
            确 定

data(){
	return {
      upload: {
        fileList: [],
        fileName: []
      },
	}
}

通过FormData创建一个数据对象，并且将上传的文件append到对象中

    // 上传发生变化钩子
    handleFileChange(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 删除之前钩子
    handleFileRemove(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 提交上传文件
    submitFileForm() {
      // 创建新的数据对象
      let formData = new FormData();
      // 将上传的文件放到数据对象中
      this.upload.fileList.forEach(file => {
        formData.append('file', file.raw);
        this.upload.fileName.push(file.name);
      });
      console.log("提交前",formData.getAll('file'));

      // 文件名
      formData.append('fileName', this.upload.fileName);
      // 自定义上传
      this.$api.uploadFile(formData).then(response => {
          console.log(response);
          // if(response.code == 200){
          //   this.$refs.upload.clearFiles();
          //   this.msgSuccess('上传成功！');
          // }else{
          //   this.$message.error(response.msg);
          // }
        })
        .catch(error => {
          this.$message.error('上传失败！');
        });

    },

使用自定义上传的接口，而不是使用*this.$refs.upload.submit();*方法
注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’

// 封装的上传请求
	uploadFile(params) {
		return axios.post(`/shiro/swpe/permission/uploadOrStartProceBPS`, params,
		 { headers: { 'Content-Type': 'multipart/form-data', token: window.localStorage.getItem('token')}})
	},