处理FileReader.onload在VUE中异步的问题
在使用FileReader将file对象转成base64的时候,需要用FileReader.onload()方法,在图片处理完成后拿到base64格式,但是FileReader.onload是一个异步的,可以用下面的方法拿到base64
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(this.result);
};
这种方法只适合在原生js里面使用,这种方法如果放在Vue中使用,就会造成this指向的问题,处理这个问题的办法有两个,一个就是改变一下this指向,另一种办法就是将onload方法放在一个Promise里面
//错误代码展示
let img
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//console.log(this.result);
img = this.result
};
console.log(img)
这种办法是错误的,因为onload这个方法是异步的,而js的执行机制是先执行同步代码,异步代码会被放到消息队列里面,也就是上面的img没有被赋值完成就开始执行倒打印img那里了.
最后贡献一下Promise的解决办法
// 先创建一个file对象转成base64的方法,然后下面调用这个方法
function imgbase(file) {
// new 一个Promise实例
return new Promise((resolve) => {
// 对文件对象的处理
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
resolve(this.result);
};
});
}
// 在这里来调用函数
const img = await imgbase(file);
// 打印img
console.log(img);
打印的结果如下