处理FileReader.onload在VUE中异步的问题

处理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);

打印的结果如下