vue-上传图片-前端实现预览-放大显示-增加、删除

本来想用elementUI的组件，结果发现，上传图片受限制太多。
利用< input type=“file”/>改造一个类型功能的上传图片
预览大图插件： ‘v-viewer’，在另外一篇文章有介绍
效果图：


代码如下：
html：

<!-- 新建时可以进行图片的新增和删除。修改时只能展示之前上传的图片，点重新上传会将之前上传的图片清空，之后可以进行重新上传图片的新增和删除 -->
      <div class="img-group" v-if="isInsert">
        <span class="control-label">上传图片</span>
        <span class="help-block">(建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M，最多可上传5张)</span>
        <div class="control-form">
          <ul class="upload-imgs">
            <li v-if="imgLen>=5 ? false : true">
              <input
                type="file"
                class="upload"
                @change="addImg"
                ref="inputer"
                multiple
                accept="image/png, image/jpeg, image/gif, image/jpg"
              />
              <a class="add">
                <i class="iconfont icon-plus"></i>
                <p>点击上传</p>
              </a>
            </li>
            <li v-for="(value, key) in imgs" :key="key">
              <div class="imgBox">
                <p class="img">
                  <viewer :images="images">
                    <img :src="getObjectURL(value)" />
                  </viewer>
                  <a class="close" @click="delImg(key)">×</a>
                </p>
                <div class="picName">{
   {
   value.name}}</div>
              </div>
            </li>
          </ul>
        </div>