目标: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;
}
这篇文章看完如果您觉得有所收获,认为还行的话,就点个赞收藏一下呗