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;
     width: 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里的图片。