使用 Fetch 和 FormData API 上传多个文件

Question

我正在尝试使用本机 Fetch 和 FormData API 一次将多个文件上传到服务器，但我终究无法让它工作。这是我得到的：

 // acceptedFiles are File objects coming from `react-dropzone`.
function handleSubmit(acceptedFiles) {
  const data = new FormData();

  for (const file of acceptedFiles) {
    data.append('files', file, file.name);
  }

  return fetch('https://example.com/api/upload', {
    method: 'POST',
    body: data,
  });
}

但是我的 Rails 服务器收到的是这样的：

 Parameters: {"files"=>#
<ActionDispatch::Http::UploadedFile:0x00007feb347becc0 @tempfile=#
<Tempfile:/var/folders/kl/y1jrp7zs55sbx075jjjl3p280000gn/T/RackMultipart201
71112-6486-1ftkufy.mp4>, @original_filename="SampleVideo_1280x720_5mb.mp4",
 @content_type="video/mp4", @headers="Content-Disposition: form-data;
name=\"files\"; filename=\"SampleVideo_1280x720_5mb.mp4\"\r\nContent-Type:
 video/mp4\r\n">}

换句话说，它看起来像 files 实际上只是一个文件。但是 FormData 的文档说 append should append multiple files 。

那么出了什么问题呢？

原文由 Maros 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案是将 files 更改为 files[] ：

 // acceptedFiles are File objects coming from `react-dropzone`.
function handleSubmit(acceptedFiles) {
  const data = new FormData();

  for (const file of acceptedFiles) {
    data.append('files[]', file, file.name);
  }

  return fetch('https://example.com/api/upload', {
    method: 'POST',
    body: data,
  });
}

原文由 Maros 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

// acceptedFiles are File objects coming from `react-dropzone`.
function handleSubmit(acceptedFiles) {
  const data = new FormData();

  for (const [index, file] of acceptedFiles) {
    data.append('files' + index, file, file.name);
  }

  return fetch('https://example.com/api/upload', {
    method: 'POST',
    body: data,      enter code here
  });
}

原文由 Abhenavh 发布，翻译遵循 CC BY-SA 4.0 许可协议