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>

 

說明：如有問題，或者建議、或者需要改進的地方，可以聯繫我，謝謝🙏