dom
<el-upload
:class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
class="avatar-uploader"
ref="upload"
action="#"
:limit="limitCountImg" //限制上传图片的数量
:show-file-list="true" //列表展示
:auto-upload="false" //点击上传
list-type="picture-card"
:http-request="handleHttpRequestIcon" //成功
:on-change="imgChange" //change
:on-remove="handleRemove" //删除事件
accept="image/jpg,image/jpeg,image/png"
>
<i class="el-icon-plus"></i>
</el-upload>
css
::v-deep .el-upload--picture-card {
width: 100px;
height: 100px;
line-height: 100px;
background: rgba(255, 255, 255, 0.06);
}
::v-deep .el-upload-list__item-actions {
width: 100px;
height: 100px;
}
::v-deep .el-upload-list__item-thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
}
::v-deep .el-upload-list__item {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.06);
}
/* 上传图片时隐藏 */
::v-deep .uoloadSty .el-upload--picture-card {
width: 100px;
height: 100px;
line-height: 100px;
}
::v-deep .disUoloadSty .el-upload--picture-card {
display: none; /* 上传按钮隐藏 */
}
script
export default{
data(){
retutn{
showBtnImg: true,
noneBtnImg: false,
limitCountImg: 1,
}
},
methods:{
imgChange(file, fileList) {
this.noneBtnImg = fileList.length >= this.limitCountImg;
},
// 处理删除事件
handleRemove(file, fileList) {
// "文件已被删除:", file
// "当前文件列表:", fileList
this.noneBtnImg = !fileList.length <= 0;
},
addConfirm() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
this.loadingShow = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
this.$refs.upload.submit();
}
});
},
handleHttpRequestIcon(file) {
httpIconRequest(file, {
next: (response) => {
// console.log(response);
},
error: (err) => {
this.loadingShow.close();
},
complete: (res) => {
this.loadingShow.close();
this.room.room_avatar = res.key;
},
});
},
}
}