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部分

<el-row>
      <el-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.imgUrl"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
          @imgLoad="imgLoad"
          v-if="visible"
        />
      </el-col>
      <el-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :lg="2" :md="2">
        <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
          <el-button size="small">
            选择
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-upload>
      </el-col>
    </el-row>

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的就处理不了。