S3に画像をアップロードできません

Question

サーバーに送信することなく、ファイルをS3にアップロードしようとしています。私はPUT私のバケツにファイルを格納する要求をすることができます私はS3 URLを署名したエンドポイントを持っています。

私はJavaScript側でいくつかのことを試みましたが動作しませんでした。ここで

（私は単純なファイルのアップロードとそれ以上何を探していますので、私はAmazonのSDKを使用していないよ、と、したくないことは）私はJavaScriptで現在何をしようとしているのです：

uploadToS3 =() => { 
    let file = this.state.files[0]; 
    let formData = new FormData(); 
    formData.append('Content-Type', file.type); 
    formData.append('file', file); 
    let xhr = new XMLHttpRequest(); 
    xhr.open('put', this.signed_url, true); 
    xhr.send(formData) 
}; 

私はたくさんのオプションを試しましたが、私は実際にアップロードの進捗を気にしないので、フェッチを使うことを好みます。私は上記のように試してみるためにどこかからxhrコードを使用しました。これらはネットワーク通話を行い、動作するはずのように見えますが、そうではありません。

私は公開URLに行くとオブジェクトがS3に作成され、ダウンロードされ、イメージビューアを使用して開くと有効なJPGではないと言われます。

アップロードを正しく行っていないと思っています。ここで

は、私は郵便配達で行う方法は次のとおりです。私は、URLを正しい署名していると私はリクエストにバイナリイメージファイルを添付しました

注意してください。そして追加以下に示すように、コンテンツの種類を明記ヘッダは、画像/ JPEGです：私はS3にログインし、自分のバケットに行くとき

、私は画像を見ることができると私はそれが公共のURLとビューのに行くことができますブラウザで。これは完璧に機能し、まさに私が望むものです。今、JavaScriptでどのように達成できるかわかりません。

PS：郵便配達員のcodeをクリックしようとしましたが、私のファイルコードは生成されません。

Answer 1

ここで問題はxhr.send(formData)で始まります。

PUT S3のファイルでは、フォーム構造をまったく使用していないときは、要求本体に生のオブジェクトバイトを送信するだけです。

Content-Type:などのメタデータは、本文のフォームデータではなくリクエストヘッダーに格納されます。

この場合、アップロードされたファイルをダウンロードしてテキストエディタで表示すると、コードが実際にS3に送信している内容を確認した後、問題は非常に明白になるはずです。S3はその後順調に保存し、リクエスト。

S3にはbrowser-based form POST uploadsがサポートされていますが、署名処理が大幅に異なり、ポリシー文書を作成して署名する必要があるため、ポリシーや署名などのフォームをそれ以外は信頼できないユーザーがファイルをアップロードできるようにします。署名されたポリシーステートメントは、ブラウザーユーザーがフォームを改ざんして意図しないアクションを実行するのを防ぎます。