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

本文介绍: 方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el–upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Con t ent-Ty pe’要为’multipart/form–data’在使用 element中的el–upload是时，当我们要上传多个文件时，el–upload 内部会多次调用。使用自定义上传的接口，而不是使用*t h i s.$refs.upload.su b m it();

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

          <el-upload 
              ref="upload" 
              :limit="10" 
              accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 
              name="files" 
              :multiple="true"
              :action="baseURL"
              :headers="myToken" <!-- 请求头设置 --&gt;
              :on-change="handleFileChange"
              :before-remove="handleFileRemove" 
              :auto-upload="false"
              :file-list="upload.fileList" 
              >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
            <el-button type="primary" @click="submitFileForm">确 定</el-button>

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.uplo ad.sub mit();*方法
注意上传文件接口的请求头中headers中的’Content-Ty pe’要为’multipart/form–data’

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