javascript - 无法将图像上传到 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 上创建了一个对象，当我访问公共(public) URL 时，它们被下载，当我使用图像查看器打开它们时，它们说它不是有效的 JPG。

我认为我没有正确上传。

这是我在 postman 中的做法:

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

当我登录 S3 并转到我的存储桶时，我可以看到一张图像，并且可以转到它的公共(public) URL 并在浏览器中查看。这非常完美，并且正是我想要的，现在我不知道如何在 JavaScript 上实现相同的目标。

PS:我什至尝试点击 postman 上的code，它不会为我生成文件代码。

Answer 1

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

当您在 S3 中PUT文件时，您根本不使用任何表单结构，您只需在请求正文中发送原始对象字节。

Content-Type: 和其他元数据位于请求 header 中，而不是正文中的表单数据中。

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

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