上傳到S3的圖像已損壞

Question

我正在嘗試將cropperjs創建的blob上傳到DigitalOcean空間。

為此，我使用了預簽名的URL，並使用Axios進行了放置請求。

問題是，如果我嘗試打開上載的圖像，我將無法打開，它已損壞。

在執行put請求之前，我使用了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上，我文件的Content-Type是
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