使用 React 將損壞的文件上傳到 AWS S3

Question

我已經嘗試了多種上傳代碼，從 axios 到 fetch。 但是，它總是以相同的結果結束。 這是最簡單的：

    const formData = new FormData();
    formData.append('file', ref)

    const response = await fetch(
      new Request(res.uploadSignedUrl, {
        method: 'PUT',
        body: formData,
        headers: new Headers({
          'Content-Type': ref.type,
        })
      })
    )

上面的代碼以狀態 200 響應，但是每當我訪問上傳圖像的圖像鏈接時，它都會給我一個小白框圖像。

小白盒圖片截圖

當我刪除請求獲取的第二個參數對象的標題時，具體的內容類型，上傳圖像的鏈接不會將我轉移到網站或任何東西。 它只是自動下載一個未知的文件類型，令人驚訝的是，它的文件大小與應該上傳的圖像的確切文件大小一致。

自動下載截圖

請注意，我已經嘗試過使用多種文件類型。 關於這個問題的任何給定想法將不勝感激。

編輯：另外，我設法與我們的后端開發人員取得了聯系。 這是我認為郵遞員的結果：有效載荷結果的截圖

回答：我在這里評論過

Answer 1

如果您嘗試將圖像發送給后端人員，然后他會將其上傳到 AWS Bucket，然后嘗試將圖像作為 base64 發送，那么他就可以做任何他需要的事情。

從圖像制作base64的示例代碼

const canvas = document.createElement('canvas')
const c = canvas.getContext('2d')

canvas.height = image.height
canvas.width = image.height

c.drawImage(image, 0, 0, canvas.width, canvas.height)

const base64 = canvas.toDataUrl('image/png' , 1.0)

Answer 2

回答：

來自 reddit 用戶 u/Wombarly，

您正在上傳表單數據而不是實際圖像。 因此，您必須獲取圖像 blob 並將其上傳。

表單數據在屏幕截圖中的有效負載頂部添加了 WebkitDisposition 位。 當您 PUT 到文件中包含的 S3 時。 破壞它。

這是我發現的一篇文章，解釋了如何：

https://medium.com/geekculture/upload-images-to-aws-s3-using-presigned-url-in-react-native-45059fe3d31b

你可以忽略 react native 位

此問題作者的附加說明：

我從來不知道有效負載中的 WebkitDisposition 會導致文件在 AWS S3 中損壞。 所以我不得不添加另一個函數來發出文件 Uri 並繼續 u/Wombarly 的建議。 其中我在這里使用代碼： https ://stackoverflow.com/a/50719098/18373031 by Srijita 供參考。 （_handleImageChange 函數中的 uri 變量）