使用fileReader时，已经获取到图片地址，但是不显示是什么原因？

Question

本人在做项目时，使用fileReader制作图片上传，在成功获取图片的地址后，把它赋值给img的src属性，但是图片却不显示。

<div class="upload-box">
    <ul>
      <li  v-for="(item,index) in imgLists">
        <img v-if="item.data != ''" :src="item.data" :alt="index">
        <span>删除</span>
      </li>
    </ul>
    <input type="file" @change="addImg($event)" accept="image/png">
  </div>

这里是html代码

addImg(e) {
    let newImg = {};
    let flag = this.flag;
    let file = e.target;
    let reader = new FileReader();
    reader.readAsDataURL(file.files[0]);
    reader.onload = function() {
      newImg.data = this.result;
      flag = true;
      setTimeout( ()=>{
        flag=false;
      },1000);
    }
    if (this.imgLists.length <= 5) {
      this.imgLists.push(newImg);
    }else{
      this.$message({
        message: '最多仅支持上传5张图片',
        type: 'warning',
        center:true,
      });
    }
  }

这里是js代码

在上传了第二张图片后才显示第一张的图片

想问下为什么不行，虽然后面通过setTimeout解决了这个问题，但是不同原理，同样想问下原因和其它的解决办法。

我的解决办法如下：

if (this.imgLists.length <= 5) {
  //有时候，push仅仅被添加到任务队列中，却没有立即执行，此时可以用setTimeout来是它立即执行。
  setTimeout(()=>{
    this.imgLists.push(newImg);
  },0);
  /*this.imgLists.push(newImg);*/
}

补充一下，后来发现这样方法好像还是无法解决，=。=

Answer 1

原因:
reader.onload = function() {} 并不是阻塞的，在读取完成之前就继续往下走了，到this.imgLists.push(newImg);这一行的时候newImg还是空的。你setTimeout其实是在赌读取完成需要多久，如果秒读就能工作，否则不能，所以你实验几次结果不同。

解决：
把下面一串都放到异步成功的回调里面去

addImg(e) {
  let newImg = {};
  let file = e.target;
  let reader = new FileReader();
  reader.readAsDataURL(file.files[0]);
  reader.onload = () => {
    newImg.data = reader.result;
    if (this.imgLists.length <= 5) {
      this.imgLists.push(newImg);
    }
    else {
      this.$message({
        message: '最多仅支持上传5张图片',
        type: 'warning',
        center: true,
      });
    }
  }
}

示例：
https://jsfiddle.net/liqi0816...