如何上传文件以及发布复杂对象

Question

我有一个页面，我可以创建一个开发人员，这是一个复杂的对象，现在我需要添加上传文件功能。我已经尝试了很多方法，但还是不管用。下面是一个示例(不需要上传文件):

// Frontend: Reactjs
let developer = {
name: "Andy",
address: {
street: "123 Im stupid rd",
city: "Los Angeles",
zip: 12345
},
tasks: [
{ name: "wake up" },
{ name: "eat" },
{ name: "take a dump" },
{ name: "sleep" }
]
}
axios({
method: "POST",
url: '/addDeveloper',
data: developer
})

这将发送开发人员，其名称，地址和任务列表到后端作为一个复杂的对象，并保存到数据库中，一切都很漂亮。

现在我想能够附加一个文件到每个任务，我有麻烦的世界。

首先，我尝试了一个只有文件的例子，没有其他的，它可以工作，像这样:

let formData = new FormData();
let files = ...; // files from input
for (let i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
httpRequest({
method: AppConsts.REQUEST_METHOD_POST,
url: `/testUpload`,
data: formData
})

这将一个文件列表发送到测试控制器方法的后端，这也可以很好地工作。但是现在，如果我想在复杂对象中包含文件，一切都变成了狗屎，我得到一个415 Media Unsupported错误:

let files = ...; //  files from input
let developer = {
name: "Andy",
address: {
street: "123 Im stupid rd",
city: "Los Angeles",
zip: 12345
},
tasks: [
{ name: "wake up", file: files[0] },
{ name: "eat", file: files[1] },
{ name: "take a dump", file: files[2] },
{ name: "sleep", file: files[3] }
]
}
axios({
method: "POST",
url: '/addDeveloper',
data: developer
})

我试过添加contentType multiform header，我试过添加整个开发人员作为formData，仍然不起作用。也许我把第二部分写错了?谁来帮帮我=

Answer 1

对于文件，您确实需要发送multipart的formData。因此，我建议将json对象字符串化，并将其作为另一个参数添加到表单数据中。

const developer = {name: "Andy", ...};
formData.append("developer", JSON.stringify(developer));

在服务器上，您需要解析JSON，但这应该很容易。