要求:上传一张图片后,隐藏上传Icon,删除该图片再把Icon展示出来
代码示例:主要看注释部分,上传图片格式与大小element官方有,这里不做代码展示
1:绑定 :class 在DOM数里加上on-remove,on-change,limit
<el-upload
:class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"// 1.动态绑定样式,控制显示隐藏
drag
:action="'v3/task/madel/uploadFile?type=' + type"
:accept="accept"
list-type="picture-card"
:on-success="handleSuccess"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
file="file"
:on-remove="handleDeleteImgRemove" //移除
:on-change="uploadImgChange" //文件上传状态改变
:limit="limitCountImg" //上传文件数量
>
<i class="el-icon-upload"></i>
</el-upload>
data() {
return {
showImg: true,//默认展示
noneUploadImg: false,//
fileList: [],
limitCountImg: 1, //上传图片的最大数量
};
},
methods:{
// 判断数量,是否显示上传icon
uploadImgChange(file, fileList) {
this.noneUploadImg = fileList.length >= this.limitCountImg;
},
// 删除图片,判断数量,是否显示icon
handleDeleteImgRemove(file, fileList) {
this.noneUploadImg = fileList.length >= this.limitCountImg;
},
}
切记去掉scope,,看了好久icon隐藏不了,结果最后因为加了scope
<!-- scoped 切记不能加scope -->
<style lang="scss">
.uploadIcon.el-upload--picture-card {
display: none !important; /* 上传按钮隐藏 */
}
</style>