Question

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

为此，我使用的是预先签名的URL，然后使用Axios发出放置请求。

问题是，如果我尝试打开上载的图像，我将无法打开它。

在执行放置请求之前，我使用了npm软件包下载blob，以查看请求之前是否损坏了该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的图像已损坏

1 个答案: