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

深藏阁楼爱情的钟 2023-06-10 04:21 47阅读 0赞

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

效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70][]

预期效果是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 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>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70]: /images/20230531/ee80f4259879435a8e2ce43fa1ac7246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/59859c0eb2a544d5bafe488ddf548507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/85e49bd8a96545c198520962c1873fbe.png