axios请求中提交多个文件作为一个对象

Question

我必须以 API 格式发送多张图片作为 API 调用的一部分

{
"date":"currentDate",
"files":[Files uploaded via input box]
}

我同样使用了以下方法

方法一

const event = document.querySelector("#files");
const filesData = new FormData();
filesData.append(`files`, event.files);
filesData.append("date", "2021-04-07");

浏览器中的表单数据即将到来：

files: [object FileList] date: 2021-04-07

方法二

const filesData = new FormData();
 for (let i = 0; i < event.files.length; i++) {
    filesData.append(`file${i}`, event.files[i]);
    }

formData.append("date", "2021-04-07");

浏览器中的表单数据即将到来：

file0: (binary) file1: (binary) file2: (binary) file3: (binary) date: 2021-04-07

方法 3

const filesData = new FormData();     
filesData.append(`files`, Object.values(event.files));
formData.append("date", "2021-04-07");

浏览器中的表单数据即将到来：

files: [object File],[object File],[object File],[object File] date: 2021-04-07

在POSTMAN中比较容易。

有人可以指导实现相同目标的正确方法，因为 API 失败了

Answer 1

在研究和寻找解决方案的过程中，我了解了 Postman 中的一个有趣功能，其中可以看到 axios 调用的 代码段。

Postman右上角有

/> v8 中的符号+
与 Cookies Code for before versions

这将打开代码片段，您可以在其中看到不同语言的 axios 请求对应的代码片段。

解法：

const event = document.querySelector("#files");
const filesData = new FormData();
for (let i = 0; i < event.files.length; i++) {
  filesData.append(`images`, event.files[i]);
}
filesData.append("date", "2021-04-07");

希望这对像我一样的其他人有所帮助。

axios请求中提交多个文件作为一个对象

Submit multiple files in axios request as an object

javascript

jquery

file-upload

reactjs

axios