如何使用 vue-cropper.js 上傳裁剪后的圖片？

Question

所以我使用一個名為 vue-cropper.js 的 npm 包來裁剪圖像並將裁剪后的圖像上傳到遠程服務器。 但是，裁剪圖像的上傳部分不起作用，因為我得到的只是 CORS 錯誤。 但問題是，當我上傳圖像而不裁剪它時，它可以工作並且沒有錯誤。 我不明白我做錯了什么。

我已經多次檢查cropper.js 文檔，他們告訴您要做的就是創建一個blob 並將其附加到表單數據，然后POST。 再說一遍，這就是我正在做的。

這是我的裁剪器組件模板。

    <vue-cropper
      v-show="imageSrc"
      class="vue-cropper"
      ref="cropper"
      :guides="true"
      :view-mode="1"
      drag-mode="crop"
      :background="true"
      :rotatable="true"
      :aspect-ratio="1"
      :src="imageSrc"
      alt="Image"
    ></vue-cropper>

這是我的裁剪和上傳代碼。

crop() {
      this.$refs.cropper
        .getCroppedCanvas({
          width: 200,
          height: 200
        })
        .toBlob(blob => {
          const formData = new FormData();
          formData.append("photo", blob, 'avatar');
          this.uploadImage(formData);
        });
    },
    rotate() {
      this.$refs.cropper.rotate(90);
    },
    uploadImage(formData) {
      const token = getCookie("ifragasatt_cookie");
      const url = "https://vem-user.fjardestatsmakten.se/userProfilePic";
      const headers = {
        "Content-Type": "multipart/form-data",
        "Access-Control-Allow-Origin": "*",
        "ifr-jwt-token": token
      };

      axios.post(url, formData, { headers });
    }
  }

我希望從端點得到“ok”作為響應。 但我得到：

POST https://vem-user.fjardestatsmakten.se/userProfilePic 502

my-profile:1 Access to XMLHttpRequest at 'https://vem-user.fjardestatsmakten.se/userProfilePic'
from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

你的后端代碼有應用cors了嗎？ 因為我在 POST 響應中看到Access-Control-Allow-Origin錯誤。 您是否將圖像從 base64 轉換為 blob？

Answer 2

有用！！！！ 我不得不將 .png 添加到“頭像”。