el-upload，实现照片墙的效果，并且只能上传单张

1、说明：elementUI中的el-upload组件中有此效果，但是是上传多张的。

     效果如图：

     

     预期效果是这样的：

     

2、实现：思路，用单个图片上传效果，然后给图片添加蒙版，在蒙版中添加放大、删除、修改图标

 

3、实现：

<div style="width: 360px;height: 180px;" class="img_div">
    <el-upload
      action="ads"
      accept=".jpg,.jpeg,.png,.JPG,.JPEG"
      :before-upload="onBeforeUploadImage"
      :multiple="false"
      :http-request="uploadImg"
      :show-file-list="false"
    >
      <img v-show="imgUrl" style="width: 360px;height: 180px;" :src="imgUrl">
      <span v-show="!imgUrl">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </span>
    </el-upload>
    <!--蒙板-->
    <a href="#" v-if="imgUrl">
      <div class="mask">
        <span class="mask-s">
          <i class="el-icon-zoom-in f-s-30" @click="lookImgUrl()"></i>
          <el-upload
            style="display: inline-block"
            action="ads"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG"
            :before-upload="onBeforeUploadImage"
            :multiple="false"
            :http-request="uploadImg"
            :show-file-list="false"
          >
          <i class="el-icon-upload2 f-s-30 m-l25" ></i>
          </el-upload>
          <i class="el-icon-delete f-s-30 m-l25" @click="deleteImg()"></i>
        </span>
      </div>
    </a>
</div>

<style lang="less" scoped>
  .img_div a:hover .mask {
    opacity: 1;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: 180px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }
  .mask-s {
    position: absolute;
    top:50%;
    left: 40%
  }
  .f-s-30 {
    font-size: 30px
  }
  .m-l25 {
    margin-left: 25px
  }
</style>

 

说明：如有问题，或者建议、或者需要改进的地方，可以联系我，谢谢?