需求描述：当鼠标移入图像时，出现删除按钮，鼠标移出图像时，删除按钮消失。

本案例实现以下功能：（1）点击方框，打开对话框选择照片；（2）删除照片

解决方案：通过css样式实现，设置【删除图标】样式为不可见【.delete-img {display: none;}】，当【li:hover】时设置【删除图标】样式可见【display: block】即可。

本案例通过采用vue编写，通过less写的样式，完整代码见文末。

现存bug：当未上传照片时，鼠标移入方框区域，仍显示删除图标（https://blog.csdn.net/maidu_xbd/article/details/104392691中已解决并优化现有问题）

案例完整代码如下：

<template>
  <div class="personal">
    <div class="content">
      <!-- 1.标题及图像说明 -->
      <div class="content-desc">
        <div class="title">上传照片</div>
        <div class="desc">照片要求:格式为jpg/jpeg/png</div>
      </div>
      <!-- 2.图像区域 -->
      <div class="content-image">
        <el-form :model="modal">
          <el-form-item prop="base64">
            <el-input
              type="text"
              style="display:none;"
              name="base64"
              v-model="modal.base64"
              autocomplete="off"
            ></el-input>
            <div class="upload-photo">
              <li>
                <img ref="img" src="../assets/images/addImage.png" @click="uploadPhoto" />
                <div class="delete-img">
                  <i class="el-icon-delete" @click="deleteImg()"></i>
                </div>
              </li>
            </div>
            <input type="file" hidden ref="photoFile" @change="fileChange" style="display: none;" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal: { base64: "" },
      deleteFlag: false,
      uploadImage: ""
    };
  },
  components: {},
  mounted() {
    this.uploadImage = this.$refs.img.src;
  },
  methods: {
    // 本地上传头像
    uploadPhoto() {
      this.$refs.photoFile.click();
    },
    // 修改头像
    fileChange(e) {
      let file = this.$refs.photoFile.files[0];
      if (/.(png|jpg|jpeg)$/.test(file.name)) {
        let fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = e => {
          this.$refs.img.src = e.target.result;
          this.$set(this.modal, "base64", e.target.result.split(",")[1]);
        };
      } else {
        this.$message({
          message: "请选择符合格式要求的图片",
          type: "warning"
        });
        this.$refs.photoFile.value = "";
      }
    },

    // 删除图片
    deleteImg() {
      this.$confirm("是否删除该照片?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$refs.img.src = this.uploadImage;
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="less">
.personal {
  margin: 10px 0;
  padding: 10px;
  background: #f0f0f0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
  border-radius: 3px;
  padding-bottom: 20px;
  .content {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding: 10px;
    // overflow-y: scroll;
    overflow: hidden;
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    //  1.标题及图像说明
    .content-desc {
      margin: 0px 10px;
      .title {
        font-size: 16px;
        border-left: 5px solid #2d8cf0;
        padding-left: 10px;
        margin-bottom: 16px;
      }
      .desc {
        margin-left: 18px;
      }
    }
    // 2.图像区域
    .content-image {
      margin: 25px 28px;
      .upload-photo {
        width: 580px;
        height: 200px;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 0px;
        padding-top: 0px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        li {
          width: 180px;
          height: 180px;
          margin-right: 15px;
          position: relative;
          .delete-img {
            display: none;
          }
          &:hover {
            .delete-img {
              display: block;
              position: absolute;
              width: 180px;
              height: 40px;
              line-height: 40px;
              left: 0px;
              top: 140px;
              background: rgba(59, 60, 61, 0.5);
              // box-sizing: content-box;
              z-index: 999;
              cursor: pointer;
              text-align: right;
              i {
                margin: 8px 10px 0 0;
                display: block;
                font-size: 24px;
                color: white;
              }
            }
          }
          img {
            border: 1px dashed #d9d9d9;
            border-radius: 5px;
            box-sizing: border-box;
            width: 180px;
            height: 180px;
            margin-top: 0px;
            &:hover {
              border: 1px dashed #409eff;
            }
          }
        }
      }
    }
  }
}
</style>