javascript - 如何使用 Fetch API 将照片上传到 AWS S3？

Question

我正在尝试使用 Fetch API 将照片文件上传到 S3 存储桶。尝试上传照片时，我在 POST 上收到 400 Bad Request。我正确获取了预签名的帖子网址和文件详细信息，但我相信我格式化 formData 的方式不正确。

我正在使用一个 html 文件输入，它使用 onchange 来运行一个 javascript 函数 handlePhoto。

html是

<input type="file" onchange="handlePhoto()" id="file_input"/>

和javascript函数是

function handlePhoto(){
    const file = document.getElementById('file_input').files[0]
    let formData = new FormData()
    fetch("/v1/photos/get_presigned_post/" , {
      method: "GET"
    })
    .then(response => response.json())
    .then(s3Result => {
      const { url, fields } = s3Result;
      Object.keys(s3Result.fields).forEach(key => {
        formData.append(key, s3Result.fields[key]);
      });
      formData.append('acl', 'public-read');
      formData.append('Content-Type', file.type);
      formData.append("file", file);

      fetch(url, {
        method: "POST",
        body: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
  });
}

任何帮助将不胜感激。

Answer 1

您不需要使用 FormData，只需使用内容类型“八位字节流”传递文件。
生成签名 URL 时必须使用 acl。

fetch(url, {
                method: 'PUT',
                body: file,
                headers: { 'Content-Type': 'application/octet-stream' }
            })