需求

输入完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 = falsethis.$router.push({path: "/outsideShelf" + "1" + "/" + "Outside Shelf Dispatch",});} else {this.$infoMsg.showErrorMsg(res.msg, this);}});},