vue实现图片上传且实时预览

<div class="up-img">
     <div class="imgList">
         <ul>
             <li v-for="(item,index) in list" :key="index" class="img-list">
                 <img :src="item">
                 <div class="delIcon" @click="delImg(index)"><i class="iconfont"></i></div>
             </li>
         </ul>
     </div>
     <div class="up-file">
          <label for="file" class="input-file-button"><--替换input上传图片原有样式（美化）-->
               <div><i class="iconfont"></i></div>
               <div>上传图片</div>
          </label>
          <input type="file" id="file" multiple @change="upload">
     </div>
</div>

data() {
  return {
    tipsShow:false,
    list:[]
  }
},
methods: {
  delImg(index) {//删除对应图片
    this.list.splice(index,1)
  },
  upload(e){//上传图片
    for(let item of e.target.files){
      if (!/image\/\w+/.test(item.type)) {
        alert("只能选择图片");
        return;
      }
    var _this = this;
    let reader = new FileReader();
    reader.readAsDataURL(item);
    reader.addEventListener('load',function(){
       _this.list.push(this.result)
    })
   }
 }
},

.room-img-show{
    display: flex;
}
.up-img{
    display: flex;
}
.up-img input{
    display: none;
}
.imgList img{
    width: 140px;
    height: 100px;
    background-size: cover;
}
.up-file{
    text-align: center;
    border: 1px solid #e0e0e0;
    background: #f4f5f7;
    width: 140px;
    height: 100px;
    border-radius: 3px;
    font-size: 18px;
}
.imgList li{
    display: inline-block;
    margin-right: 5px;
}
.img-list{
    position: relative;
}
.img-list:hover .delIcon{
    display: block;
}
.delIcon{
   position: absolute;
   background: rgba(41, 30, 30, 0.5);
   color: #fff;
   text-align: center;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   line-height: 100px;
   display: none;
   border-radius: 3px;

}
.delIcon i{
    font-size: 20px;
    cursor: pointer;

}