如何在发布复杂文件的同时上传文件 object

Question

我有一个可以创建开发人员的页面，这是一个复杂的 object，现在我需要向其添加上传文件功能。我已经尝试了很多方法，但仍然没有用。这是一个示例（没有文件上传）：

// 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
})

这会将开发人员及其姓名、地址和任务列表作为一个复杂的 object 发送到后端，然后保存到数据库中，一切都很美好。

现在我希望能够为每个任务附加一个文件，但我遇到了很多麻烦。

因此，首先我尝试了一个仅包含文件的示例，没有其他内容，并且它有效，如下所示：

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
})

这会将文件列表发送到后端的测试控制器方法，该方法也能很好地工作。但是现在，如果我想将文件包含在复杂的 object 中，一切都会变成 sh*t，我会收到 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

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

const developer = {name: "Andy", ...};

formData.append("developer", JSON.stringify(developer));

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

如何在发布复杂文件的同时上传文件 object

How to upload files along with posting a complex object

javascript

ajax

multipartform-data

reactjs

axios