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