vue2表单和文件在点击确认后一起上传

当表单和需要上传的文件走同一个接口的时候，但是饿了么的上传组件默认选择完之后直接走接口，和需求相违背，则自定义上传方法

页面：

1.页面代码

<el-form ref="form" :model="importForm" label-width="80px">
        <el-form-item label="任务名称">
          <el-select v-model="importForm.rwmc" placeholder="请选择任务名称" clearable ref="optionRef">
            <el-option label="任务一" value="0"></el-option>
            <el-option label="任务二" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务来源" label-width="80px" prop="rwly">
          <el-input v-model="importForm.rwly" clearable></el-input>
        </el-form-item>
        <!-- 上传 -->
        <el-upload
            class="upload-demo"
            action="#"                    //自定义上传需要将action为空或者"#"
            ref="uploadExcel"
            :limit="1"                    //限定上传文件数量
            :headers="{'token': token}"   //当接口请求头需要用户token时添加
            :on-exceed="handleExceed"     //文件数量超过限定触发
            :auto-upload="false"          //选取完文件后立即进行上传,这里要关闭
            :multiple="false"             //是否支持多选文件
            :http-request="uploadFile"    //自定义上传方法
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text" style="height:50px;"><em>点击上传</em></div>
        </el-upload>
        <el-form-item>
          <el-button type="primary" @click="onConfirm">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>

2.js代码

//限制上传文件数量
handleExceed() {
        //可对用户进行提醒
      }

//自定义上传方法，使用上传组件的submit()后才会触发以获取文件实体
uploadFile(param) {
      this.file = param.file;
    }

// 确定按钮
onConfirm() {
      this.$refs.uploadExcel.submit();
      const formDatas = new FormData();
      if (this.file) {
        formDatas.append("file", this.file);
      }
      this.importForm.rwmc = this.$refs.optionRef.selected.label
      this.addForm = this.importForm
      this.addTrans(this.addForm, formDatas);
     }

3.接口代码

//接口代码
addTrans(form, data) {
        return request({
          contentType: false,
          headers: {
            'Content-Type': 'multipart/form-data'    //指定传输数据为二进制类型，比如图片、mp3、文件。
          },
          method: 'post',
          url: this.IP_URL + '/fileImport/import',    //加号前面为当前开发地址，后面为接口
          params: form,
          data: data,
        }).then(
          this.$message({
            message: '上传成功！',
            type: 'success'
          }),
          this.upload = false    //弹窗关闭
        )
      }

参照原文：vue+elementUI实现表单数据和上传文件同一个接口同时上传_vue表单数据和文件一起提交_汤圆今天学前端了吗的博客-CSDN博客