vue 仿微信朋友圈9张图上传功能

项目需求要求用户上传商品的时候可以一次性上传9张图，多余9张提示‘只能上传9张图’，并且每张图右上角有个删除按钮，图片也可以点击放大。

出来的效果图如下：

 话不多说，上代码：

 <el-form-item label="商品清单/设计图纸：">
              <div class="showImg">
                <ul>
                  <li v-for="(item,index) in showImgsrc" :key="index" style="position: relative">
                    <img :src=item alt="">
                    <span style="    position: absolute;
    top: -5px;
    right: -5px;
    background: rgb(223, 6, 21);
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 20px;
    font-size: 12px;
     20px;
    height: 20px;
    cursor: pointer;
    border-radius: 30px;" @click="clearImg(index)">X</span>
                  </li>
                  <li v-if="showImgsrc.length<9">
                    <div class="uploadImgBtn" id="uploadImgBtn" style="text-align: center">
                      <span style="display:inline-block;margin:30px auto;font-size: 30px;color: #e5e5e5">
                        <img src="@/assets/images/addImg.png" alt="">
                      </span>
                      <input  type="file" @change="uploadImg($event)" class="uploadImg" multiple>
                    </div>
                    <span  style="font-size: 12px;position: absolute">已上传（{{showImgsrc.length}}/9）</span>
                  </li>
                </ul>
              </div>
            </el-form-item>

方法如下：

 uploadImg(e){
        let that=this;
        let imgFiles=e.target.files;
        console.log(e.target.files.length);
        if(e.target.files.length+that.showImgsrc.length>=10){
          this.showDialog=true;
          this.contentText='您最多只能上传9张图片，请重新上传！'
        }else{
          for( var i = 0 ; i < imgFiles.length ; i++ ){
            var fr = new FileReader();
            fr.onload = function(e){
              that.showImgsrc.push(this.result);
            }
            fr.readAsDataURL(imgFiles[i]);//读取文件
          }
        }
      }

删除图片：

 clearImg(index){
        this.showImgsrc.splice(index,1);
},

功能逻辑很简单：就是声明一个空数组showImgSrc,当用户当张图上传的时候，循环图片然后push到showImgSrc空数组里面。最后ul li九宫格显示showImgSrc里的图片。