尝试使用 fetch 从浏览器通过 signedUrl 上传图像 S3，但图像在 s3 中为空白

Question

My backend is a nodejs application and I want users to upload images to an S3 bucket using an S3 signedUrl.

From my server I am running:

const s3 = new AWS.S3({ params: { Bucket: bucket }});

app.get('/api/images/signed-url', authMiddleware, (req, res) => {
  s3.getSignedUrl('putObject', 
    { ContentType: 'image/jpeg', Key: uuid() + '.jpeg' }, 
    (_err, url) => res.send({ signedUrl })
})

Then from my browser client I upload to that endpoint

document.querySelector('input[type="file"]').onchange = async (event) => {
  const { signedUrl } = await fetch('/api/images/signed-url').then(res => res.json())

  const target = event.target
  const file = target.files[0]
  const reader = new FileReader()

  reader.onload = async (event) => {
    event.target.value = null

    await fetch(signedUrl, {
      method: 'PUT',
      body: event.target.result,
      headers: {
        "Content-Type": "image/jpeg"
      }
    })
  }

  reader.readAsText(file)
}

I get a 200 and the image is in S3 however the file in S3 is a tiny 10x10 white box. Can I get some help on what I am doing wrong?

Answer 1

...almost right, just don't use the filereader, send the blob/file directly in body

  const target = event.target
  const file = target.files[0]

  await fetch(signedUrl, {
    method: 'PUT',
    body: file,
    headers: {
      "Content-Type": "image/jpeg"
    }
  })