前言
这段时间我负责的基于 coreui/vue 的后台管理项目遇到难题了。在开发商品上架功能时，表单提交时，上传的图片数据始终为空，参数携带不了。但在发送请求之前是可以正常打印文件数据的。
尝试解决
1
2
3
4
5
6
7
8
| let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
this.$http
.post("/product/add", params, config)
.then().catch()
|
结果是不 OK。
- 尝试组件的其他 API 进行 files 字段赋值，确认是不是 v-model 无效？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <b-form-group label="商品缩略图" label-for="fileInput" :label-cols="3">
<!-- plain: 采用默认的原始样式，multiple: 多选 -->
<b-form-file
id="fileInput"
v-model="goodsData.files"
placeholder="选择一张图片"
drop-placeholder="拖拽图片到这里"
accept="image/*"
browseText="浏览"
@change="uploadPicture"
@input="selectPicture"
></b-form-file>
</b-form-group>
// methods ，赋值过程不再复现
uploadPicture(e) {
console.log(e.target.files);
},
selectPicture(val) {
console.log(val);
}
|
结果依旧不行。
- 尝试操作 b-form-file 的 name 属性依旧不行。
转机
近几日管理系统项目赶进度要上测试环境，对应的小程序要上体验版。就再次网上查了查文件上传，运行了网上一个文件上传案例时，发现需要 new FormData 实例，将 files 文件数据 append 进实例就可以了。
解决
实例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| onSubmit() {
if (Object.values(this.goodsData).indexOf("") !== -1) {
this.showErrorMsg({ message: "有必填项为空" });
return;
}
if (this.goodsData.files.length === 0) {
this.showErrorMsg({ message: "请至少上传一张图片" });
return;
}
// 表单提交，数据处理
let params = new FormData();
// params.append('files', this.goodsData.files)
for (let key in this.goodsData) {
params.append(key, this.goodsData[key]);
}
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
this.$http
.post("/product/add", params, config)
// .post("/product/add", this.goodsData)
.then(res => {
// 略
})
.catch(error => {
// 略
});
},
|
问题被完美解决。
总结
vue + axios 实现文件上传在拿到文件数据后还需要满足一下条件
- 默认的 content-type 为 json, 需要设置为 formdata 格式的。
- new FormData 实例，将需要传递的参数 append 进实例中。
参考文章
vue+axios 上传文件