本人在做項目時，使用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僅僅被添加到任務(wù)隊列中，卻沒有立即執(zhí)行，此時可以用setTimeout來是它立即執(zhí)行。
  setTimeout(()=>{
    this.imgLists.push(newImg);
  },0);
  /*this.imgLists.push(newImg);*/
}

補充一下，后來發(fā)現(xiàn)這樣方法好像還是無法解決，=。=