时间戳

首页 > 解决方案 > 上传到 S3 的图像已损坏

javascript - 上传到 S3 的图像已损坏

问题描述

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

为此，我使用了预签名的 URL，并使用 Axios 来执行 put 请求。

问题是，如果我尝试打开上传的图像，我不能，它已损坏。

在执行 put 请求之前，我使用了一个 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 上，我的文件的 Content-Type 是
multipart/form-data; boundary=----WebKitFormBoundaryDYMUYTIXMb7817EY

标签： javascriptamazon-s3axiosblobdigital-ocean

解决方案

我找到了解决办法。

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

而不是使用formData我只是使用blob

推荐阅读