vue实现图片上传预览删除功能

" 现在有一个需求，需要实现图片上传、展示、删除的功能，看看操作代码

最终实现的效果


上传完第一张出现第二张上传位置

传满6张就不再展示继续上传的位置，删除了又可以继续上传

下面来看看我实现的代码

<template>
  <div class="container">
        <div class="Uploader">
              <div class="image">上传图片
              <span>{{filenum}}/6</span>
              </div>
            <div class="imgAdd">
               <span class="itemImg" v-for="(item,index) in fileList " :key="index">
                 <img :src="item.file.src" alt="图片" class="uploadimg">
                 <img src="../assets/img/删除图片@2x.png" alt="" @click="delImg(index)" class="delte">
               </span>
               <div class="fileupload-box" v-show="fileList.length<=5">
                    <div class="c">
                        <input type="file"  style="display:none" id="uploadfile"  @change="fileChange($event)" accept="image/*" multiple/>
                        <img src="../assets/img/添加图片@2x.png" id="image"  @click="UploadImg">
                    </div>

                </div>
              </div>
          </div>
           <!-- 提交按钮使用了vant得button组件 -->
        <div class="btn">
            <van-button
            style="font-size=1.4rem"
            size="large"
            type="info"
            >提交</van-button>
        </div>
  </div>
</template>

<script>
//引入组件
import Vue from 'vue';
import { Button} from 'vant';
Vue.use(Button);

export default {
    name:"index",
    data() {
        return {
            fileList:[],
            filenum:0,
            index:[],
            pictureId:[],
            uploadIcon:'',
            file:'',
            reader:'',
            FilePaths:[]
        }
    },
   methods:{
        //点击上传图片
		UploadImg() {
           document.getElementById('uploadfile').click();
       },
       
       //监听上传
       fileChange(e) {
       
          console.log("监听上传",e.target);
          
          if(!e.target.files[0].size)return;
          
           let files = e.target.files
           
           for(let j = 0;j<files.length; j++ ){
           
           console.log("files",e.target.files[j]);
           
           //传入图片 调用处理
            this.fileAdd(files[j]);
            
           }
           e.target.value = ''
           
         },
      fileAdd(file) {
      
      // 判断是否为图片文件
      if (file.type.indexOf("image") == -1) {
      
      //选择文件提示
        Notify({
          message: "请选择图片文件",
          color: "#FFFFFF",
          background: "#F88C61"
        });
        return;
        
      } else {
        
        //创建文件读取对象
        let reader = new FileReader();
        
        //创建一个Image对象
        let image = new Image();
        
        let that = this;
        
		//使用readAsDataURL读取图像文件
        reader.readAsDataURL(file);
        
        reader.onload = function() {
        
        //this.result文件读取结果转为base64并赋值
        
        file.src = this.result;
        
       // console.log(" file.src", file.src);
          
        image.onload = function() {
            
            let width = image.width;
            
            let height = image.height;
            
            file.width = width;
            
            file.height = height;
            
            console.log("file", file);
			
			//将上传图片push到数组里在页面上展示
			
            that.fileList.push({ file });
            
            console.log("fileList数据", that.fileList);
            
            that.pictureId.push(that.fileList[0].file);
            
            // console.log('pictureId数据',that.pictureId);
          };
          image.src = file.src;

		 //每上传一张+1
		 
          that.filenum++;
        };
      }
    },
    
    // 点击删除
    delImg(index) {
    
      //删除指定下标的图片对象
      console.log("删除对象", index);

      if (isNaN(index) || index >= this.fileList.length) {
        return false;
      }
      this.fileList.splice(index, 1);

      console.log("删除后==", this.fileList);
      
      //图片删除上传数量-1
      this.filenum--;
    },
}
}
</script>

<style   scoped>
* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  background-color: #f5f5f5;
  height: 100vh;
}
.main {
  width: 100%;
  padding: 0 1.5rem;
  text-align: left;
  background-color: #fff;
  padding-top: 1.5rem;
}
.Uploader {
  margin-top: 1rem;
  width: 100%;
  padding: 1.5rem 0.8rem;
  text-align: left;
  background-color: #fff;
  margin-bottom: 2.2rem;
}
.Uploader .image {
  color: #333333;
  font-size: 1rem;
  padding-bottom: 2rem;
}

.Uploader .imgAdd {
  display: inline-block;
}
.imgAdd .itemImg {
  display: inline-block;
  width: 6.5rem;
  height: 6.5rem;
  border: 1px dashed #83838b;
  padding: 0.6rem;
  text-align: center;
  position: relative;
  margin-right: 0.4rem;
  margin-bottom: 0.5rem;
}
.itemImg .uploadimg {
  width: 5.3rem;
  height: 5.3rem;
}
.itemImg .delte {
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  z-index: 999;
}

.image span {
  float: right;
  font-size: 1rem;
  color: #83838b;
}
.fileupload-box {
  width: 6.5rem;
  height: 6.5rem;
  border: 1px dashed #83838b;
  padding: 0.6rem;
  display: inline-block;
  vertical-align: top;
}
.van-uploader {
  vertical-align: top;
}
.fileupload-box {
  width: 6.5rem;
  height: 6.5rem;
  border: 1px dashed #83838b;
  padding: 0.2rem;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-bottom: 1rem;
}
.fileupload-box img {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  margin-top: 2.4rem;
}
.btn {
  width: 100%;
  margin-top: 2.5rem;
  padding: 0 1.5rem;
}
.btn .bottom {
  color: #fff;
  background: red;
  height: 4.4rem;
  line-height: 4.4rem;
  border-radius: 0.4rem;
}
</style>

：为方便大家预览，css我也贴上来了，需要用的小伙伴更换图片文件就好
：码字不易，拿代码请留言哦~
：转载注明出处~ 谢谢！