因为blob格式的图片存在一些访问渲染问题,因此想着能不能转为base64的进行渲染,找来的很多方法都不能使用,最终找到了以下方法
主要是使用readAsDataURL()将文件转化为base64格式,然后用FileReader的onload方法获取成功后的值,要注意的是onload方法中this指向的是FileReader实例,想在其中使用外部的方法需要用变量接收外部的上下文环境
var img = document.getElementById('filepick')
const that = this
if (img.files[0].size >= 4500000) {
that.$message.warning('图片体积大于4.5M,请重新选择')
return
}
function ToBase64 () {
/* 转换base64 */
var imgFile = new FileReader()
imgFile.readAsDataURL(img.files[0])
imgFile.onload = function () {
that.wallpaperData.currentImg = 'url(' + this.result + ')'
that.wallpaperData.paperType = 'img'
that.updatewallpaper()
}
}
ToBase64()