使用抓取api通过预签名的URL亚马逊s3上传图像

Question

[嗨，我正在尝试客户将其图片直接在reactjs Web应用程序中上传到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%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=credentials%2Fus-west-1%2Fs3%2Faws4_request&X-Amz-Date=20200422T230320Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=68e0915ba1abb2722107c96b684e3a62f2e67aae9594bd4dece45132853f5be2“

在客户中，我这样做的是

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);
      });
  };

当我单击上载时，将调用handleUpload函数并将其上载到S3。但是，当我尝试打开文件时，它没有打开。并说签名不匹配。

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

我仅设置了ContentType，并且双方的值均相同。

有什么想法吗？请帮助！

Answer 1

您应该在两个地方都将Content-Type而不是ContentType设置为标题名称。

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