web-dev-qa-db-ja.com

FetchおよびFormDataAPIを使用した複数のファイルのアップロード

ネイティブの 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は実際には1つのファイルにすぎないように見えます。しかし FormDataのドキュメントでは、appendは複数のファイルを追加する必要があると言っています 。

では、何が問題になっていますか？

javascriptruby-on-railsecmascript-6multipartform-datareact-dropzone
8
Maros

解決策は、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,      
  });
}
13
Maros