通过Element-ui upload实现文件上传（一次请求上传多个不同字段的文件）

1.一次请求上传单个文件

通过submit()方法：

html：

  <el-form-item
          label="单个文件上传">
          <el-upload
            ref="upload"
            class="upload-demo"
            drag
            multiple
            :headers="upload.headers"
            :action="upload.url"
            :data="upload.data"
            :auto-upload="false"
            :disabled="upload.isUploading"
            :on-change="handleFileChange"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
              <!-- <div>支持一次上传多个 / 支持 mp4 格式视频</div> -->
            </div>
          </el-upload>
   </el-form-item>

代码：

<script>
    export default {
       data() {
    return {
      // 用户导入参数
      upload: {
        isUploading: false, // 是否禁用上传
        url:
          process.env.VUE_APP_BASE_API + 上传接口 , // 请求地址
        headers: { Authorization: "Bearer " + 获取的token值 }, // 设置上传的请求头部
        data: {}, // 上传的额外数据，用于文件名
      },
    };
  },
    method:{
 /** 处理上传的文件发生变化 */
    handleFileChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
    },
    /** 处理文件上传中 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true; // 禁止修改
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      // 提示成功，并刷新
      this.$modal.msgSuccess("上传成功");
    },
}
};
</script>

3.实现上传：

this.$refs.upload.submit();

2.一次请求上传多个不同字段的文件

首先通过new formData 创建一个对象示例，然后通过append来添加要上传的键和值到表单里面

html：

   <el-form-item label="一次接口上传不同字段的文件">
          <el-upload
            class="upload-demo"
            drag
            multiple
            :action="url"
            :auto-upload="false"
            :on-change="handleFileChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
              <!-- <div>支持一次上传多个 / 支持 mp4 格式视频</div> -->
            </div>
          </el-upload>
        </el-form-item>
    <el-form-item label="一次接口上传不同字段的文件">
          <el-upload
            class="upload-demo"
            drag
            multiple
            :action="url"
            :auto-upload="false"
            :on-change="handleFileChange2"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>

代码：

data(){
 return{
        url: process.env.VUE_APP_BASE_API, // 请求地址（process设置环境变量）
        form : {
        name: undefined,
        comment: undefined,
        coverFile: undefined,
        essentialsImgFile: undefined,
      };
   }
}

method:{
 /** 处理上传的文件发生变化 */
    handleFileChange(file, fileList) {
      this.form.coverFile = file.raw;
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
    },
    /** 处理上传的文件发生变化 */
    handleFileChange2(file, fileList) {
      this.form.essentialsImgFile = file.raw;
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
    },
    // 文件上传按钮
    submitForm(){
         let formData = new FormData();
         // 可以使用FormData.append来添加键/值对到表单里面；
         // 传数值
         // formData.append('name', id);
         // 传文件 
         // formData.append('files', file);
         for (const key in this.form) {
           if (this.form[key]) {
            formData.append(key, this.form[key]);
          }
        }
        // createExperiment 封装上传文件的接口
        createExperiment(formData).then((res) => {
          this.$modal.msgSuccess("新增成功");
        });
   }
}

append()方法会自动识别你上传的是文件还是数值。