泰州建设信息网站推广工具

问题：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-cropperref="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的就处理不了。