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 });
    }
  }

我希望从端点得到一个“好的”答复。但是我得到了：

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

成功！！！！我必须为.avatar添加.png。

如何使用vue-cropper.js上传裁剪的图片？

2 个答案: