手写封装图片上传

编码背景

为了方便

由一张默认图和 上传的图片组成

默认图片不能删除（不需要可以从代码里删除这个版块）

技术 ： vue js

直接上代码吧

<template>
  <div id="app">
    <div class="upload">
      <input type="file" id="file" multiple @change="upload" />
    </div>
    <ul class="view">
      <li>
        <img src="../assets/logo.png" />  // 默认图片换上自己的路径
        <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 {
  name: "UploadImg",
  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);
        });
      }
      //------------------------------------------------------------
    },
    noDelect(){
        alert('默认图片 无法删除')
    },
    delect(index){
        this.list.splice(index,1)
    }
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  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;
    li {
      width: 200px;
      height: 120px;
      background-color: rgba(54, 194, 35, 0.1);
      list-style: none;
      margin: 20px;
      position: relative;
      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;
      }
    }
    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;

    #file {
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
  .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;
  }
}
</style>