element-ui的el-upload组件上传单张图,不显示图片列表。
需求:
1.显示单张图片,不需要图片列表
2.可预览图片,删除图片重新上传
环境
1.element-ui
2. vue3.0
实现效果:
1.test.vue 代码
<template>
<div >
<div class="myload">
<el-upload
ref="picUpload"
action="/admin/test/imgupload/1" //上传的api
:headers="header"
:show-file-list="false"
class="avatar-uploader"
:on-success="uploadsucess">
<img v-if="imgUrl!=''" :src="imgUrl" class="avatar">
<span v-if="imgName!=''" class="el-upload-action">
<i class="el-icon-zoom-in" style="margin-right: 15px"
@click.stop="handlePictureCardPreview()"></i>
<i class="el-icon-delete"
@click.stop="handleRemove()"></i>
</span>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
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("图片上传成功")
},
}
}
</script>
css
<style scoped >
.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);
}
</style>
3.总结
1.利用overflow属性对其他元素进行隐藏。
2.通过研究,对css的理解有进一步的提升。
3.研究仅用于学习,方法老套,期待新方法