將圖像上傳到S3不起作用

Question

我正在嘗試將文件上傳到S3，而不必發送到我的服務器。 我有一個端點，該端點為我提供了簽名的S3 URL，可以在其中發出PUT請求以將文件存儲到存儲桶中。

我試圖在JavaScript方面做一些無效的事情。 （我沒有使用亞馬遜的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代碼嘗試了上述操作。 這些確實可以進行網絡呼叫，並且看起來應該可以工作，但不能。

發生的情況是：在S3上創建了一個對象，當我轉到公共URL時，將下載它們，而當我使用圖像查看器打開它們時，他們說這不是有效的JPG。

我以為我沒有正確執行上傳。

我在郵遞員中的操作如下：

請注意，我具有正確的簽名URL，並且已將二進制圖像文件附加到請求中。 並添加了一個標頭，指示內容類型為image / jpeg，如下所示：

當我登錄到S3並轉到我的存儲桶時，我可以看到一個圖像，並且可以轉到它的公共URL並在瀏覽器中查看。 這很完美，而且正是我想要的，現在我不知道如何在JavaScript上實現同樣的效果。

PS：我什至試圖單擊郵遞員上的code ，但它不會為我生成文件代碼。

Answer 1

這里的問題始於xhr.send(formData) 。

當您PUT在S3中不使用任何形式的結構，在所有的文件，你只要發送原始對象的字節請求體。

Content-Type:其他元數據放在請求標頭中，而不是正文中的表單數據中。

在這種情況下，如果您下載上傳的文件並使用文本編輯器進行查看，則一旦看到代碼實際發送到S3的問題就很明顯了，然后S3順從地存儲並處理后續請求。

請注意，S3確實支持基於瀏覽器的表單POST上傳 ，但是這樣做的簽名過程明顯不同，要求您創建並簽署策略文檔，以便可以將包括策略和簽名在內的表單發送到瀏覽器並允許原本不受信任的用戶上載文件-簽名的策略聲明可防止瀏覽器用戶篡改表單並執行您不想要的操作。