使用读取api上传图像使用预签名url亚马逊s3

Question

您好，我正在尝试将客户的图片直接上传到reactjs web app中的amazon s3。我在后端生成预签名的url，如下所示

def get_presigned_url(file_extension, content_type, user_id) do
  config = get_aws_s3_config()
  bucket = get_bucket_name()
  filename = create_s3_file_name(file_extension, user_id)
  query_params = [{"ContentType", content_type}]

  ExAws.S3.presigned_url(config, :put, bucket, filename, query_params: query_params)
end

生成的url看起来像这样。

https://s3.us-west-1.amazonaws.com/churchapp-la/5/ab49d601efed40e0a6de0509ab78c091.png?ContentType=image/png

在客户端我这样做

async function uploadImage(url, data, headers) {
    const response = await fetch(url, {
      method: "PUT",
      headers: headers,
      body: data
    });
    return response;
  }

const handleUpload = e => {
    const formData = new FormData();
    formData.append("image", file);

    const myHeaders = new Headers();
    myHeaders.append("ContentType", file.type);
    uploadImage(presignedUrl, formData, myHeaders)
      .then(data => console.log("Printing uploadImage result: ", data.url))
      .catch(error => {
        console.log("Error: ", error);
      });
  };

当我点击upload时，handleUpload函数被调用并上传到S3。但是当我试图打开一个文件时，它没有打开。并且说签名不匹配。

我用谷歌搜索了一下。有人说头应该在后端和前端匹配，我认为我做得对。

我只设置ContentType和值是相同的两边...

有什么想法吗？请帮忙！

Answer 1

您应该将Content-Type而不是ContentType设置为两个位置的标题名。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type