avue|element-ui的el-upload组件上传单张图，不显示图片列表。 vue.js|css|html5|elementui|工作记录

element-ui的el-upload组件上传单张图，不显示图片列表。需求：
1.显示单张图片，不需要图片列表
2.可预览图片，删除图片重新上传
【avue|element-ui的el-upload组件上传单张图，不显示图片列表。】环境
1.element-ui
2. vue3.0
实现效果：

1.test.vue 代码

> import store from "@/store"; import { imgDelete} from '@/api/test'export default { name: "test", data(){ return { header: { Authorization: "Bearer " + store.getters.access_token, }, imgUrl:'',//图片地址 imgName:'',//图片名称 dialogVisible:false, //预览图片窗口 dialogImageUrl:'',//预览地址 } }, methods:{//图片删除,imgDelete为删除的api,后台接收到参数则删除 handleRemove() { imgDelete(this.imgName).then(res => { this.$message.success('删除成功'); this.imgUrl = '' this.imgName = "" }).catch(e => { this.$message.error('删除失败'); }); },//图片预览 handlePictureCardPreview() { this.dialogImageUrl = this.imgUrl; this.dialogVisible = true; },//图片上传成功,res为后台上传成功返回的回显参数 uploadsucess(res, file, fileList) { this.imgUrl = res.data.url this.imgName = res.data.name this.$message.success("图片上传成功") }, } }

css

.myload{ width: 205px; height: 105px; overflow: hidden; }img{ border: 1px dashed #ccc; margin-top: 1px; }.avatar-uploader { padding: 2px 0 0 0; cursor: pointer; position: relative; background-size: 95% 95%; }.avatar { position: relative; width: 200px !important; height: 100px !important; line-height: 100px !important; display: block; }.myload /deep/ .avatar-uploader-icon { font-size: 28px !important; color: #8c939d !important; width: 200px !important; height: 100px !important; line-height: 100px !important; text-align: center !important; background-color: #fbfdff; border:1px dashed #ccc; }.el-upload-action { position: absolute; top: 0; left: 0; display: block; width: 200px; height: 100px; font-size: 0; color: #fff; text-align: center; line-height: 100px; } .el-upload-action:hover { font-size: 20px; margin-top: 4px; margin-left: 2px; background-color: #000; background-color: rgba(0, 0, 0, .4) } .img-error { width: 200px; height: 100px; line-height: 100px; background-color: rgb(245, 247, 250); }

3.总结 1.利用overflow属性对其他元素进行隐藏。
2.通过研究，对css的理解有进一步的提升。
3.研究仅用于学习，方法老套，期待新方法