上传到 S3 的图像已损坏

Question

我正在尝试将 cropperjs 创建的 blob 上传到 DigitalOcean 空间。

为此，我使用预签名 URL，并使用 Axios 执行放置请求。

问题是，如果我尝试打开上传的图片，我无法打开，它已损坏。

在执行放置请求之前，我使用了一个 npm 包来下载 blob，以查看它是否在请求之前已损坏。但事实并非如此。所以这一定是请求的问题，但我不知道是什么。

这是我用来上传图片的代码。

this.$refs.cropper
            .getCroppedCanvas({
              width: 500,
              height: 500
            })
            .toBlob(blob => {
              var formData = new FormData();
              blob.lastModifiedDate = new Date();
              blob.name = response.data.id + ".png";
              formData.append(response.data.id, blob, blob.name);
              axios
                .put(response.data.url, formData, {
                  header: {
                    "Content-Type": blob.type
                  }
                })
                .then(() => {
                  console.log("uploaded");
                })
                .catch(err => {
                  console.log(err);
                });
            });

response.data.url是预签URL.

同样在 DigitalOcean 上，我的文件的内容类型是
multipart/form-data; boundary=----WebKitFormBoundaryDYMUYTIXMb7817EY

Answer 1

我找到了一个修复程序。

axios
    .put(response.data.url, blob, {
        header: {
            "Content-Type": blob.type
        }
    })
    .then(() => {
        console.log("uploaded");
    })
    .catch(err => {
        console.log(err);
    });

我没有使用 formData，而是使用了 blob

上传到 S3 的图像已损坏

Image uploaded to S3 is corrupted

javascript

blob

amazon-s3

digital-ocean

axios