API请求中的“formData.append('files[]', file)”是什么意思？答案

【问题标题】：What does `formData.append('files[]', file)` mean in API request?API请求中的“formData.append('files[]', file)”是什么意思？
【发布时间】：2021-03-19 16:05:14
【问题描述】：

我正在将 jQuery file upload 重构为 Axios。

当 jQuery 文件上传发出请求（上传 jpg 文件）时，我在 Chrome 开发工具中注意到了这种有效负载

查看源代码

如果我想让 与 jQuery 文件上传 在 Axios 中实现的负载相同，我将不得不这样做：

<input type="file" id="file-selector" />

document.getElementById("file-selector").addEventListener("change", (event) => {
  const formData = new window.FormData();

  formData.append("files[]", event.target.files[0]);

  axios.post(myEndPoint, formData);
});

看不懂的部分是formData.append("files[]", event.target.files[0]);

为什么 jQuery File Upload 使用 formData 键中的括号 "files[]"？

还是我重构的 Axios 代码有这个错误？

【问题讨论】：

标签： javascript jquery axios jquery-file-upload

【解决方案1】：

这行代码与jQuery无关：

formData.append("files[]", event.target.files[0]);

分解：

formData 是对 FormData 对象的引用。它用于在 AJAX 请求中发送二进制文件数据。
append() 方法用于手动向 FormData 对象添加内容。
files[] 是放入内容的请求属性的名称。键末尾的 [] 通常是 PHP 命名约定，用于指示服务器端从发送的任何内容创建一个数组相同的键名。
event.target.files[0] 是要添加到 FormData 对象中该键的二进制内容。

【讨论】：

【解决方案2】：

为什么 jQuery File Upload 使用 formData 键中的括号“files[]”？

就客户而言，括号是名称的任意部分。

您可以使用files[] 或files{} 或{}{}{}###!!! 或bob，除了负载中Content-Disposition 标头的name= 部分之外，它不会对客户端产生任何影响。

另一方面，服务器可能赋予[]特殊的含义。

例如，PHP 会从所有以[] 结尾的同名字段中获取值并将它们放入一个数组中。给定多个名称相同但不以[] 结尾的字段，它将丢弃除最后一个以外的所有字段。

其他一些表单流程库也采用了这种约定。 Node.js body-parser module 通过 extended 参数支持它作为可选功能。但它不是通用的。

【讨论】：

【解决方案3】：

也就是说，请求参数files是数组，而不是File对象。

所以，formData.append("files[]", event.target.files[0]); 将允许您上传一个文件。

【讨论】：