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

【问题标题】：How to upload cropped picture with vue-cropper.js?如何使用 vue-cropper.js 上传裁剪的图片？
【发布时间】：2019-05-06 08:44:23
【问题描述】：

所以我使用了一个名为 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.

【问题讨论】：

标签： javascript vue.js file-upload cropperjs

【解决方案1】：

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

【讨论】：

我不确定，因为我无权访问后端。但是，如果我不裁剪图像，则上传工作。这是我不明白的。

【解决方案2】：

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

【讨论】：