背景:一般情况下,数据传输 Content-Type 使用 application/json
原传参格式:
[{
"name": "桌子",
"quotas": [
{
"money": 1,
"unit": "元"
}
]
}]
修改:上传文件时,Content-Type 需要 改成 formData
vue 代码
- headers:添加 Content-Type,值为 formData
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
- formData:新建 formData
let formData = new FormData();
- 传参为字符串:formData.append(“name”,“value”)
formData.append("name", this.form.name);
- 传参为数组:formData.append(
arrayName[${i}].money
,value);
formData.append(`quotas[${
i}].money`, item.money);
参考代码
saveSubmit() {
if (this.form.quotaDetailList.length == 0) {
this.$message.error("请添加指标明细");
return;
}
let formData = new FormData(); // 创建form对象
// formData添加多个文件至annexList
this.fileList.forEach((item) => {
formData.append("annexList", item.raw);
});
formData.append("name", this.form.name);
// fordata添加数组类型quotaDetailList参数
this.form.quotaDetailList.forEach((item, i) => {
formData.append(`quotas[${
i}].money`, item.money);
formData.append(`quotas[${
i}].unit`, item.unit);
});
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
// 判断新增还是编辑
if (this.$parent.dialogTitle == "新增") {
this.$axios
.post(`/`, formData, config)
.then((res) => {
this.$notify({
title: "提示",
message: "添加成功",
type: "success",
});
this.$parent.dialogVisible = false;
this.$parent.search(1);
})
.catch((err) => {
console.log(err);
});
} else {
formData.append("id", this.$parent.dialogId);
this.$axios
.put(`/`, formData, config)
.then((res) => {
this.$notify({
title: "提示",
message: "编辑成功",
type: "success",
});
this.$parent.dialogVisible = false;
this.$parent.search(1);
})
.catch((err) => {
console.log(err);
});
}
},