网站服务器 同步备份,广告宣传网站,用ps做网站页面的大小,wordpress 密码不对问题#xff1a;vue-cropper在ie11下选择本地图片后#xff0c;网页上并未显示出图片#xff0c;打开F12有报错#xff1a;拒绝访问blabla的。但是在chrome下一切正常。
开发环境#xff1a;node14.17.5 , vue2 , vue-cropper0.6.2 , macOS big sur 11.4(M1).
解决办法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-rowel-col :xs24 :md12 :style{height: 350px}vue-cropperrefcropper:imgoptions.imgUrl:infotrue:autoCropoptions.autoCrop:autoCropWidthoptions.autoCropWidth:autoCropHeightoptions.autoCropHeight:fixedBoxoptions.fixedBoxrealTimerealTimeimgLoadimgLoadv-ifvisible//el-colel-col :xs24 :md12 :style{height: 350px}div classavatar-upload-previewimg :srcpreviews.url :stylepreviews.img //div/el-col/el-rowbrel-rowel-col :lg2 :md2el-upload action# :http-requestrequestUpload :show-file-listfalse :before-uploadbeforeUploadel-button sizesmall选择i classel-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(文件格式错误请上传图片类型,如JPGPNG后缀的文件。);} 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(文件格式错误请上传图片类型,如JPGPNG后缀的文件。);} 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的就处理不了。
