el-upload上传附件并携带其他参数

发布时间 2023-10-30 10:42:43作者: 小虾米吖~
 <el-dialog title="导入"
               :visible.sync="showExportDialog"
    >
      <el-form :model="addForm" ref="addForm" size="small" :rules="rules" label-width="130px">
        <el-form-item label="excel文件" prop="file">
          <el-upload style="display: inline-block;margin-left: 10px"
                    class="upload-demo"
                     ref="upload"
                     accept=".xls,.xlsx"
                  :data="addForm" // 发送请求的参数对象
                     :auto-upload="false" // 取消自动上传,获取file对象后先等一下
                     :action="uploadFileUrl" // 提交表单的url
                     :headers="headers" //请求头
                     :show-file-list="false"
                     :on-success="handleUploadSuccess"
                     :on-change="changeFile"
                     >
            <span v-if="curName">{{curName}}</span>
            <el-button type="primary" icon="" v-else>选文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="纸质扫描附件" prop="annexUrl">
          <fileUpload :isShowTip="false" :value="addForm.annexUrl" :limit="1" @input="getFileList"
                      :fileType="['png','jpg','jpeg']">
          </fileUpload>
        </el-form-item>
        <el-form-item label="培训现场其它说明" prop="notes" v-if="data_type==='train'">
          <el-input type="textarea" v-model="addForm.notes"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitComplete">确 定</el-button>
    </span>
    </el-dialog>

script部分

changeFile(file){
      this.curName = file.name; // 必须,选择文件后可把文件名展示出来,否则感觉没有选中文件一样。
    },
    // 导入成功
    handleUploadSuccess(res, file) {
      console.log('res',res);
      if (res.code !== 200) {
        return this.$alert(res.message, {
          dangerouslyUseHTMLString: true
        });
      } else {
        this.closeDialog();
        this.pageList();
      }
    },

 getFileList(filesList) {//纸质扫描附件,这里给参数对象的annexUrl赋值
       this.addForm.annexUrl= '';
       filesList?.forEach(el=>{
         this.addForm.annexUrl = el.url;
       })
    },
 // 导入:提交表单
    submitComplete() {
      console.log(this.addForm)
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.$refs.upload.submit();  // 表单验证后这里直接调用el-upload组件自带的click方法。
        }
      });
    },

遇到的问题:

1、必须在上传组件el-upload组件上传,传递file(formData)类型的文件对象,表单验证后再传递(即使封装成formData)永远无法触发后台接口。

2、此时当选择的excel文件为必选项,则表单验证无法进行,因为file是el-upload自带的参数key,此时若再在addForm内部加一个file验证,则请求时会有两个file值,且是不对的。(待解决这个问题再来更新。)