vue使用 el-upload 上传文件附加参数
vue使用 el-upload 上传文件附加参数
这个需求是 一个上传文件的按钮,点击之后选择文件,可以多选,选完之后不上传文件,需要对文件进行配置,也就是添加额外的参数,添加完成之后,点击上传按钮,把文件以及响应文件的参数上传到服务器上去,然后是一个一个提交。
首先是HTML代码:
选取文件
上传到服务器
只能上传xlsx模板文件,且不超过500kb
JS代码:
submitUpload() {
// this.$refs.upload.submit(); // 原始提交事件
for (let i = 0; i < this.fileList.length; i++) {
let fd = new FormData()
fd.append('name', '文件名字')
fd.append('type', '类型一')
fd.append('file', this.fileList[i].raw)
this.upDataFile(fd);
}
},
// 上传文件
upDataFile(fileData) {
this.$http({
url: `/mouldApi/mould/importOne`,
method: 'post',
data: fileData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(({ data }) => {
if (data.message) {
this.$message({
message: data.message,
type: 'success'
});
}
})
},
handleChange(files, fileList) {},

完成,因为有些地方不好截图,就这个样子吧。