因项目遇到上传多张图片，还要把图片预览展示出来，还要进行删除

使用element-ui 无法达到需求，因为我这是只是接口中的一个参数而已，我要的是用户点击上传，而不是自动上传，

我就自己写了个来实现 

<template>
    <div class="img-files flex">
        <div v-if='imgs.length>0' class="flex">
            <div class="img-box" v-for="(item, i) in imgs" :key='i' >
                <img :src="item" alt=""> <span @click="del(i)"><i class="el-icon-delete"></i></span>
            </div>
        </div>
        <div class="img-file" v-if='imgs.length < size'>
            <input type="file" id='files' @change='fileChange'>
            <label for="files">上传图片</label>
        </div>
    </div>
</template>

<script>
export default {
  name: 'upfiles',
  data() {
    return {
      imgs: [],      // 图片预览地址
      imgfiles: [],  // 图片原文件，上传到后台的数据
      size: 5       // 限制上传数量
    }
  },
  methods: {
    fileChange() {  // 加入图片
       var _this = this
       var event = event || window.event;
       var file = event.target.files
       var leng=file.length;
        for(var i=0;i<leng;i++){
            var reader = new FileReader();    // 使用 FileReader 来获取图片路径及预览效果
            _this.imgfiles.push(file[i])
            reader.readAsDataURL(file[i]); 
            reader.onload =function(e){
            _this.imgs.push(e.target.result);   // base 64 图片地址形成预览                                 
            };                 
        }    
    },
    del(i) {  // 根据下标删除
      this.imgfiles.splice(i, 1)
      this.imgs.splice(i, 1)
      console.log(this.imgs)
      console.log(this.imgfiles)
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .img-files {
        width: 600px;
        margin: 0 auto;
    }
  .img-box{
    width: 160px;
    position: relative;
    border:1px solid #e6e6e6;
    margin-right: 20px;
    background: #f6f6f6;
    img{
      width: 160px;
    }
    span {
      position: absolute;
      top:5px;
      right: 10px;
      color: red;
      display: none;
    }
    &:hover span{
        display: block;
    }
}
.img-file{
    height: 160px;
    width: 160px;
    display: flex;
    align-items: center;
    font-size: 30px;
    text-align: center;
    border: 1px #333 dashed;
    justify-content: center;
    margin: 0;
    position: relative;
    > input {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    >label {
        position: absolute;
        font-size: 18px;
        color: #333;
    }
}
</style>