element上传图片,调取接口传值，参数FormData为空

需求

输入完reason，选完文件后，点击提交按钮后 调取接口。

遇到的问题

上传文件orderFile 字段一直为空

打印了发现，上传文件也是有值得。但是传到接口中就为空

原因

json里边不能放file，但是formData里可以放 file 也可以放json

应该说是formData里可以放任何你需要提交的东西

所以 修改后将需要传给接口的字段 放到formData里，进行传值

修改后

有值了。

错误写法

正确写法

完整代码

  <el-dialog :modal="false" v-el-drag-dialog :visible.sync="openVisible" :close-on-click-modal="false" width="30%">
      <div style="margin: 40px 20px 20px 0px">
        <div class="inputFlex">
          <div class="inputTitle">{
   
   { $t('outSideShelf.reason') }}</div>
          <el-input v-model="reason" clearable style="margin: 0px 5px;" />
        </div>
        <el-button class="btn">
          <el-upload class="filter-item" ref="upload" action="" accept=".csv,xlsx" :multiple="false" :auto-upload="false"
            :on-change="handleChange">
            <el-button icon="el-icon-plus" size="mini" type="primary">{
   
   {
              $t("outSideShelf.upWorkOrder")
            }}</el-button>
          </el-upload>
        </el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">Submit</el-button>
      </div>
    </el-dialog>

 data() {
    
    
    return {
    
    
      openVisible: false,
      uplodFile: {
    
    },
      uploadParams: {
    
    },
      reason: ''

    };
  },

//上传事件
 handleChange(file, fileList) {
    
    
      this.uploadfile = file.raw;
    },
    //提交
    onSubmit() {
    
    
      const params = new FormData();
      params.append("mode", 'RACK');
      params.append("reason", this.reason);
      params.append("orderFile", this.uploadfile);
      console.log(params)
      getSubmit(params).then((res) => {
    
    
        if (res.code == 0) {
    
    
          this.$infoMsg.showInfoMsg(res.msg, this);
          this.openVisible = false
          this.$router.push({
    
    
            path: "/outsideShelf" + "1" + "/" + "Outside Shelf Dispatch",
          });
        } else {
    
    
          this.$infoMsg.showErrorMsg(res.msg, this);
        }
      });

    },