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// "当前文件列表：", fileListthis.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;},});},
}}