vue-cropper在ie11下选择本地图片后，无显示、拒绝访问的问题

问题：vue-cropper在ie11下选择本地图片后，网页上并未显示出图片，打开F12有报错：拒绝访问blabla的。但是在chrome下一切正常。

开发环境：node14.17.5 , vue2 , vue-cropper0.6.2 , macOS big sur 11.4(M1).

解决办法：

将vue-cropper的img的值设置为blob url即可解决。

代码：

vue部分

      
        
      
      
        

          
        
      
    
    

    
      
        
          
            选择
            
          
        
      
    

js部分：

export default {
  data(){
    return {
      visible:false,
      options: {
        imgUrl: '', //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true // 固定截图框大小 不允许改变
      },
    }
  },
  mounted(){
    this.visible = true
  },
  methods: {
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        alert("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        // 创建一个 URL 对象
        const blobUrl = URL.createObjectURL(file);
        this.options.imgUrl = blobUrl;
      }
    },
  }
}

关键的解决问题的代码就是beforeUpload这个方法，使用URL.createObjectURL将你选择的本地图片文件转为一个blob url，即可保证ie11和chrome下都可以正常选择本地图片并且进行后续操作。

但如果你不需要考虑ie11，只用chrome的话，那这里用new FileReader().readAsDataURL()把图片文件转为base64格式的数据也可以用。具体写法：

    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        alert("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.imgUrl = reader.result;
        };
      }
    },

原因：

这个其实是vue-cropper0.6.2这个版本自己的问题。它在处理图片时，加了这么一段:

      if (this.isIE) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var url = URL.createObjectURL(this.response);
          img.src = url;
        };
        xhr.open("GET", this.img, true);
        xhr.responseType = "blob";
        xhr.send();
      } else {
        img.src = this.img;
      }

这就导致在ie11的环境下，图片只能传入blob url的格式，传入其他的格式比如base64的就处理不了。