問題タブ [react-dropzone]

DropzoneS3Uploader を使用して画像を S3 にアップロードするサーバーレス React アプリ (開発に npm を使用) を構築しています。ファイルを S3 バケットにアップロードする前に、署名付き URL をリクエストするために API Gateway (Lambda がサポート) を使用するように設定しています。

render メソッドは、次のようにコンポーネントを返します...

これが実行されると、署名付き URL の生成に成功します。

リクエスト URL: https://.eu-west-1.amazonaws.com/Prod/?objectName=&contentType=image%2Fjpeg リクエスト方法: POST ステータス コード: 200

ただし、そこから直接 404 になります (以下のスタック トレース)。npm がイメージを一時ファイルとしてキャッシュしようとするかどうか疑問に思っています。S3へのPUTリクエスト中にサーバー/イメージを参照できないように見える問題が何であれ...

リクエスト URL: http://localhost:3000/undefined リクエスト方法: PUT ステータス コード: 404 Not Found

http://localhost:3000/undefined 404 (見つかりません) ./node_modules/react-dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.uploadToS3 @ s3upload.js:171 (匿名) @ s3upload.js:108 XMLHttpRequest.send (非同期) ./node_modules/react-dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.executeOnSignedUrl @ s3upload.js:113 ./node_modules/react -dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.uploadFile @ s3upload.js:178 (匿名) @ s3upload.js:53 ...

DropzoneS3Uploader アップロード オプションの一部として「サーバー」オプションがあります。空白のままにすると、このエラーが発生し、他の人が入力され、エラーが言及したサーバー URL に置き換えられます。前述のように、私はこのサーバーレスを実行する予定なので、言及するサーバーはありません。

他の誰かがこれを前に見ましたか、何か提案がありますか?

Dropzone に切り替えて axios を使用すると問題なく動作するので、DropzoneS3Uploader が実装コードを抽象化しすぎて、この動作を制御できないのではないかと考えています。

ありがとう！

react-dropzoneを使用しようとしていますが、ゾーンにドラッグされたフォルダーのすべての画像を読み取ろうとしています。

彼らには例があるようです。

しかし、動作しているようには見えず、どのサードパーティのプラグインが使用されているかもわかりません。

私のローカルコピーはこのエラーを受け取ります

を使用してファイルアップロードシステムに取り組んでいますreact-dropzone。ファイルを正常にアップロードし、ドラッグ/ドロップ div の下にファイル名とサイズを表示できます。

ファイルが表示されたら、ドラッグ/ドロップ領域をバックグラウンドで実行しようとしましたが、大きな失敗をしました。しかし、私はこれを行うことはできません。これは、Dropbox、Google Drive、および他のほとんどすべてのファイルアップロードサイトが機能する方法であるため、実行できることを知っています. これを達成するための最良の方法は何ですか？

これまでの作業は次のとおりです。

FileUploader コンテナ

FileDropzone コンポーネント

これまでのところ、要素を非表示にしようとしましたが、それも無効になっているようです。preventDropOnDocumentまた、Dropzoneコンポーネントに小道具を追加しようとしましたが、何もしませんでした。