有这么一个需求，就是我们要给员工设置业绩和目标，但是我们已经在本地的表格里面设置好了，现在需要导入到系统里面，如果一个一个的输入，有点太费劲了，所以做了一个导入的功能，这个需求有如下功能：
1.可以选择年份，某一年的目标
2.可以选择目标，是那一条目标的业绩
3.要上传表格，同步数据用
这就是一个不仅需要上传文件，在上传文件的同时，还需要携带参数。
平时我们做的只是一个上传文件的功能，但是这次我们多了参数，怎么做呢？下面我们来一步步实现
首先我们跟平常一样，写一个隐藏的输入框，这个输入框的type类型是file类型
<input id="importInputFile" type="file" @change="uploadFile">
然后我们写页面要展示的上传文件的样式，如下图
代码如下：
<el-input v-model="file.name" :disabled="true" />
<el-button type="primary" @click="selectFile">
选择文件
</el-button>
其中input框是我们要展示的上传文件的名称，按钮是我们点击进行选择文件的。
然后我们写好上传的参数的样式：
代码如下：
<span>目标： </span>
<el-select v-model="targetId" filterable :placeholder="请选择" size="mini" style="width: 159px !important; margin-right: 10px">
<el-option v-for="item in targetList" :key="item.id" :value="item.id" :label="item.ruleName" size="mini">{{ item.ruleName }}</el-option>
</el-select>
<span>年份 </span>
<el-date-picker type="year" placeholder="选择年" v-model="dateYear" value-format="yyyy" />
这些样式我们都写好之后，开始写功能了。
先写选择文件的功能：
selectFile() {
document.getElementById('importInputFile').click()
},
uploadFile(event) {
var files = event.target.files
const file = files[0]
this.file = file //把选择的文件信息，记录到file中
event.target.value = '' //这里要清空的原因是要解决第二次无法选择同样的文件的问题。
},
这时候我们已经选择好文件了，下一步就是选择目标和年份，这步是在页面上进行操作的，这里不在叙述。
然后我们已经选择完成了，要进行下一步点击确认进行上传了，在这一步需要注意的是，同时进行上传文件和传参。
在这里要看我们的后端的接收参数的方式，如果是根文件是同级的传参方式是下面这种：
updateFile(result) {
let file = JSON.parse(JSON.stringify(this.file))
let formData = new FormData();
formData.append("file", this.file);
importTargetValue({
params: {
targetId: this.targetId,
dateYear: this.dateYear,
},
formData: formData
}).then(res =>
console.log(res)
}).catch((err) => {
console.log(err)
})
}
如果传参方式是放在文件内部接收的，那传参方式是这种：
updateFile() {
let file = JSON.parse(JSON.stringify(this.file))
let formData = new FormData();
formData.append("file", this.file); //要上传的 文件数据
//要上传的 其他参数
formData.append("targetId", this.targetId);
formData.append("dateYear", this.dateYear);
importTargetValue({
formData
}).then(res =>
console.log(res)
}).catch((err) => {
console.log(err)
})
}
这里着重介绍下第二种方式，这种方式是在form对象里面直接追加的，我们可以直接在form对象里面进行追加其他参数，使用append方法追加即可，这里需要注意的是如果我们要传的某个参数是一个对象，formdata的append会把一般的对象转成字符串，所以我们得提前使用JSON.stringify进行json字符串的转换，例如：
formData.append("obj",JSON.stringify(this.obj))
到这里我们就完成了整个文件附带参数的上传方法，
我们在点击确定上传按钮的时候，处理完其他逻辑，直接调用updateFile方法即可。
