将图像上传到 S3 不起作用

Question

我正在尝试将文件上传到 S3 而不必发送到我的服务器。我有一个端点，它给我签名的 S3 URL，我可以在其中发出 PUT 请求将文件存储到我的存储桶。

我试图在 JavaScript 方面做几件事，但没有奏效。（我没有使用亚马逊的 SDK，也不想使用，因为我正在寻找简单的文件上传，仅此而已）

这是我目前在 JavaScript 中尝试做的事情：

uploadToS3 = () => {
    let file = this.state.files[0];
    let formData = new FormData();
    formData.append('Content-Type', file.type);
    formData.append('file', file);
    let xhr = new XMLHttpRequest();
    xhr.open('put', this.signed_url, true);
    xhr.send(formData)
};

我尝试了很多选项，我更喜欢使用 fetch，因为我不太关心上传进度，因为这些只是图像。我使用来自某处的 xhr 代码来像上面那样尝试。这些确实可以进行网络调用，看起来应该可以，但实际上没有。

发生了什么：在 S3 上创建了一个 object，当我转到 public URL 时，它们被下载，当我使用图像查看器打开它们时，他们说这不是有效的 JPG。

我在想我没有正确上传。

这是我在邮递员中的做法：

请注意，我已正确签名 URL 并且已将二进制图像文件附加到请求中。并添加了一个 header 说明内容类型是 image/jpeg 如下所示：

当我登录到 S3 并转到我的存储桶时，我可以看到一张图像，我可以转到它的 public URL 并在浏览器中查看。这很完美，正是我想要的，现在我不知道如何在 JavaScript.

上实现同样的效果

PS: 我什至尝试在 postman 上点击 code，它没有为我生成文件代码。

Answer 1

这里的问题开始于xhr.send(formData)。

当您 PUT S3 中的文件时，您根本不使用任何表单结构，您只需在请求 body.[=15 中发送原始 object 字节=]

Content-Type: 和其他元数据进入请求 headers，而不是 body 中的表单数据。

在这种情况下，如果您下载上传的文件并使用文本编辑器查看它，一旦您看到您的代码实际发送到 S3 的内容，然后 S3 会顺从地存储和提供，问题应该会非常明显后续请求。

请注意，S3 确实支持 browser-based form POST uploads，但是这样做时，签名过程明显不同，需要您创建并签署一份政策文件，以便您可以发送表格，包括政策和签名，到浏览器并允许 otherwise-untrusted 用户上传文件 -- 已签名的策略声明可防止浏览器用户篡改表单并执行您不希望的操作。

将图像上传到 S3 不起作用

Upload images to S3 doesn't work

javascript

file-upload

amazon-s3

fetch