【vue】上传头像

目标：1、实现上传头像
2、鼠标划过头像，显示遮罩层，若头像为空则不显示遮罩层，显示默认上传的图标

一、上传头像

          <el-upload
              :class="
                userform.img !== ''
                  ? 'avatar-uploader boxCardUploadImg'
                  : 'avatar-uploader'
              "
              action=""
              :show-file-list="false"
              :http-request="upFile"
              :limit="2"
              :on-change="handleChange"
            >
              <img v-if="userform.img" :src="userform.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div v-if="userform.img">上传头像</div>
            </el-upload>

 // 导入头像
    handleChange(file, fileList) {
      const fileName = file.name; // 文件名字
      const fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
      if (fileType === "png" || fileType === "jpg") {
        this.file = file;
        return;
      } else {
        this.$message({
          type: "warning",
          message: "附件格式错误，请重新上传！",
        });
      }
    },
    async upFile(item) {
      const formData = new FormData();
      formData.append("files", this.file.raw);
      const res = await UploadData(formData);
      if (res.code === 200) {
        this.userform.img = res.data[0].FileUrl;
        this.$notify({
          type: "success",
          position: "bottom-left",
          message: "头像添加成功",
          duration: 2000,
          offset: 100,
        });
      } else {
        this.$message.error(res.data);
      }
    },

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  // border-color: #409eff;
  border-color: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px !important;
  height: 100px !important;
  display: block !important;
}

.boxCardUploadImg .el-upload div {
  display: none;
}
.boxCardUploadImg .el-upload:hover div {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50px;
  position: absolute;
  font-size: 18px;
  display: initial;
  z-index: 999;
  color: #fff;
  top: 0;
  left: 0;
  background-color: #17163c;
  opacity: 0.5;
}

这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下呗