element上传图片,调取接口传值，参数FormData为空-Toy模板网

这篇具有很好参考价值的文章主要介绍了element上传图片,调取接口传值，参数FormData为空。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element上传图片,调取接口传值，参数FormData为空,vue.js,前端,el-upload,formData

需求

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

遇到的问题

上传文件orderFile 字段一直为空
element上传图片,调取接口传值，参数FormData为空,vue.js,前端,el-upload,formData
打印了发现，上传文件也是有值得。但是传到接口中就为空

原因

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

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

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

修改后

有值了。
element上传图片,调取接口传值，参数FormData为空,vue.js,前端,el-upload,formData

错误写法

element上传图片,调取接口传值，参数FormData为空,vue.js,前端,el-upload,formData

正确写法

element上传图片,调取接口传值，参数FormData为空,vue.js,前端,el-upload,formData 文章来源地址https://www.toymoban.com/news/detail-669243.html

完整代码

  <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);
        }
      });

    },