formData.append('files[]', file) 在 API 请求中是什么意思？

Question

当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 在 formData 键中使用括号 "files[]" 上传文件？

还是我重构的 Axios 代码出错了？

Answer 1

Why jQuery File Upload using the brackets "files[]" in formData key?

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

你可以使用 files[] or files{} or {}{}{}###!!! or bob 除了 name=负载中 Content-Disposition header 的一部分。

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

例如，

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

其他一些表单处理库已经采用了这个约定。 Node.js body-parser module 支持它作为带有 extended 参数的可选功能。虽然它不是通用的。

Answer 2

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

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

Answer 3

这行代码与jQuery没有任何关系：

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

分解：

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

formData.append('files[]', file) 在 API 请求中是什么意思？

What does `formData.append('files[]', file)` mean in API request?

javascript

jquery

jquery-file-upload

axios