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

最新推荐文章于 2024-04-13 16:50:07 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-04-13 16:50:07 发布

阅读量954

点赞数

文章标签： vue.js 前端 el-upload formData

本文链接：https://blog.csdn.net/Maxueyingying/article/details/132428996

版权

在这里插入图片描述

需求

输入完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);
        }
      });

    },