web-dev-qa-db-ja.com

React dropzone、画像のアップロード方法？

React dropzoneを使用して、onDropコールバックを使用して画像に正常にアクセスしました。ただし、サーバーに画像を送信してAmazon S3にアップロードしようとしています。 S3バケットに送信し、署名されたURLをクライアントに画像に返します。

私はこれまでに持っている情報ではこれを行うことができず、ドキュメントはこれを私の知識に言及していないようです。

onDropは、ファイルを使用したreduxアクションで関数呼び出しをトリガーします。

export function saveImageToS3 (files, user) {
  file = files[0]
  // file.name -> filename.png
  // file -> the entire file object
  // filepreview -> blob:http:localhost:3000/1ds3-sdfw2-23as2

  return {
    [CALL_API] : {
      method:'post',
      path: '/api/image',
      successType: A.SAVE_IMAGE,
      body: {
        name: file.name,
        file: file,
        preview: file.preview,
        username: user
      }
    }
  }
}

ただし、サーバーにアクセスすると、このblobイメージを保存する方法がわかりません（ブラウザーからのみ参照されます）。

 server.post('/api/image', (req, res) => {
  // req.body.preview --> blob:http://localhost:3000/1ds3-sdfw2-23as2
  // req.body.file -> {preview:blob:http://localhost:3000/1ds3-sdfw2-23as2}, no other properties for some reason
})
reactjsamazon-s3react-redux
15
Kim Lee

React Dropzoneは、マルチパートリクエストでサーバーに送信できる File オブジェクトの配列を返します。使用するライブラリに応じて、異なる方法で実行できます。

Fetch API を使用すると、次のようになります。

var formData = new FormData();
formData.append('file', files[0]);

fetch('http://server.com/api/upload', {
  method: 'POST',
  body: formData
})

Superagent を使用すると、次のようになります。

 var req = request.post('/api/upload');
 req.attach(file.name, files[0]);
 req.end(callback);
16
George Borunov