1

所以我使用了一个名为 vue-cropper.js 的 npm 包来裁剪图像并将裁剪后的图像上传到远程服务器。但是，裁剪图像的上传部分无法正常工作，因为我得到的只是 CORS 错误。但问题是，当我上传图像而不裁剪它时，它可以工作并且没有错误。我不明白我做错了什么。

我已经多次检查cropper.js 文档，他们告诉你要做的就是创建一个blob并将其附加到表单数据，然后发布。再说一次，这就是我正在做的事情。

这是我的裁剪器组件模板。


    <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.
4

2 回答 2

0

有用！！！！我必须将 .png 添加到“头像”。

于 2019-05-06T10:06:01.347 回答
0

您的后端代码是否已应用cors？Access-Control-Allow-Origin因为我在 POST 响应中看到错误。您是否将图像从 base64 转换为 blob？

于 2019-05-06T09:22:19.970 回答