在Axios vue.js中发送带有multipart/form数据发布请求的数组数据

Question

我使用Axios从vue.js项目发送了一个帖子请求，其中包含一个文件上传，需要我使用FormData，我找到了一个很好的答案，帮助我使用FormData:

const getFormData = object => Object.keys(object).reduce((formData, key) => {
formData.append(key, object[key]);
return formData;
}, new FormData());

并且对于报头：CCD_ 1。

POST调用如下所示：

axios.post("http://127.0.0.1:8000/api/document/",
getFormData(this.documentData),
{
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log("Successfully uploaded: ", response.data)
})
.catch(err => {
console.log("error occured: ", err)
})

这是我发送的数据：

documentData: {
name: '',
file: '',
version: '',
company: '',
author: '',
category: []
}

当发送带有单个类别id的数据时，它可以正常工作，但当我发送多个类别id时，会显示以下错误：

"category": [
"Incorrect type. Expected pk value, received str."
]

我该如何解决这个问题？

Answer 1

假设您的服务器端进程期望数组类型有多个重复的字段名，那么您将需要类似于以下的内容

const getFormData = object => Object.entries(object).reduce((fd, [ key, val ]) => {
if (Array.isArray(val)) {
val.forEach(v => fd.append(key, v))
} else {
fd.append(key, val)
}
return fd
}, new FormData());

一些服务器端进程(例如PHP(要求集合类型字段包含[]后缀。如果这就是你正在使用的，请更改这条线

val.forEach(v => fd.append(`${key}[]`, v))

---

此外，从浏览器发送FormData时，不要手动设置Content-type标头。您的浏览器将为您完成此操作，包括所需的边界令牌

axios.post("http://127.0.0.1:8000/api/document/", getFormData(this.documentData))
.then(response => {
console.log("Successfully uploaded: ", response.data)
})
.catch(err => {
console.error("error occurred: ", err)
})

Answer 2

您可以使用json字符串，我也在使用它与vue应用

formData.append("TeamMembers", JSON.stringify(this.TeamMembers));

axios
.post("/api/pro", formData, {
onUploadProgress: (progressEvent) => console.log(progressEvent.loaded),
headers: { "Content-Type": "multipart/form-data", },  })

团队成员是一个数组。。你可以用这种方式在另一边解析

const myArr = ['bacon', 'lettuce', 'tomatoes'];
const myArrStr = JSON.stringify(myArr);
console.log(myArrStr);
// "["shark","fish","dolphin"]"
console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

Answer 3

对象数组传递值

var arr=['上海','北京'];
var formData = new FormData();
for (var i = 0; i < arr.length; i++) {
formData.append('city[]',arr[i]);
}