使用elementui的upload上传控件实现圆形遮罩层上传头像

效果：

源码

 <el-upload class="avatar-uploader" :headers="uploadHeaders"
                action="http://192.168.172.180:9527/jt-home-manage/base/oss/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="staffPhoto" :src="staffPhoto" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div v-if="staffPhoto" class="avatar-mask">上传头像</div>
 </el-upload>

async handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log("this.imageUrl", this.imageUrl);
            if (this.imageUrl) {
                this.$store.commit('user/setStaffPhoto', this.imageUrl);

                const res = await this.$store.dispatch("user/updateUserInfo", {
                    "avatar": this.imageUrl,
                });
                console.log("res", res);
                if (res.code == 20000) {
                    this.$message({
                        message: "上传成功",
                        type: "success"
                    })
                } else {
                    this.$message({
                        message: "上传失败",
                        type: "error"
                    })
                }
            }
        },

 .avatar-uploader {
            margin-bottom: 30px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;

            border: 1px solid #8c939d;
            border-radius: 50%;
        }

        .avatar-mask {
            display: none;
        }

        .avatar-mask {
            display: none;
        }

        .avatar-uploader .el-upload:hover .avatar-mask {
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            font-size: 14px;
            display: initial;
            z-index: 999;
            color: #fff;
            top: 0;
            left: 0;
            background-color: #17163c;
            opacity: 0.5;
        }

        .avatar {
            border-radius: 50%;
            width: 64px;
            height: 64px;
            display: block;
        }