写一个本地图片上传到网页的Vue页面

本地图片上传到网页

<template>
  <div class="test">
      <div class="upload">           
        <input type="file" id="file" multiple @change="upload">
      </div>
      <ul class="view">
        <li>
            <img src="../assets/logo.jpg">
            <div class="delect" title="删不了我" @click="noDelect">×</div>
        </li>
        <li v-for="(item,index) in list" :key="index" >
          <img :src="item">
          <div class="delect" @click="delect(index)"></div>
        </li>     
    </ul>
  </div>
</template>

<script>
export default {
  data() {
     return {
        list:[],
     }
  },
  methods: {
      upload(e){
      //e.target指向事件执行时鼠标所点击区域的那个元素，那么为input的标签，
      // 可以输出 e.target.files 看看，这个files对象保存着选中的所有的图片的信息。
      console.log(e.target.files)
      //------------------------------------------------------     
      // 既然如此，循环这个files对象，用for of 循环，     
      for(let item of e.target.files) {
        //正则表达式，判断每个元素的type属性是否为图片形式，如图
        if (!/image\/\w+/.test(item.type)) {
        // 提示只能是图片，return
          alert("只能选择图片");
          return;
        } 
        // 保存下当前 this ，就是vue实例
        var _this = this;
        //  创建一个FileReader()对象，它里面有个readAsDataURL方法
        let reader = new FileReader();
          // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径, 
          //这样就可以上传电脑任意位置的图片
          reader.readAsDataURL(item);
          //文件读取成功完成时触发
          reader.addEventListener('load',function(){
          //  reader.result返回文件的内容。
          //只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。
              //给数组添加这个文件也就是图片的内容
              _this.list.push(this.result)
          })
        }
        //------------------------------------------------------------
      },
      delect(index){
              console.log(index);
              this.list.splice(index,1);                    
          },
          // 这是默认图片的方法，弹出默认图片无法删除
      noDelect(){
          alert('默认图片无法删除。')
      },

  }
}
</script>

<style>

.test{
    width: 900px;
    background-color: rgb(241, 241, 241);
    margin: 50px auto;
} 
.view{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: space-around;
}
 .view > li{
    width: 200px;
    height: 120px;
    background-color: rgba(54, 194, 35,0.1);
    list-style: none;
    margin: 20px;
    position: relative;
}
.view > li > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.delect{
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    background-color: rgba(255, 255, 255,0.5);
    user-select: none;
    cursor: pointer;
    opacity: 0;
}
.delect:hover{
    
    background-color: rgba(31, 31, 31, 0.5);
      color: white;
}
.view>li:hover .delect{
    opacity: 1;
}
 .upload{
    width: 80px;
    height: 20px;
    background-color: rgba(135, 206, 235,0.2);
    border: 1px dashed black;
    border-radius: 5px;
    position: relative;

}
.upload:hover{
    background-color: rgba(135, 206, 235,1);
}
.upload::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '上传图片';
    font-size: 13px;
    text-align: center;
    font-family: 'fangsong';
    line-height: 20px;
    user-select: none;
}
#file{
    width: 100%;
    height: 100%;
    opacity: 0;
}

</style>