问题概述:
在使用element-ui的el-upload上传文件时,要显示缩略图,但是官方给出的显示缩略图模板是picture-card
类型的,如果要上传单个文件或图片并显示缩略图,我暂时还没有觉接办法,所以只能模仿官方给出的图片列表类型自定义单个图片上传样式。
<!-- 缩略图显示-->
<div class="img-show" v-if="imgUrl">
<img :src="imgUrl" class="avatar">
<span class="actions">
<!-- 放大 -->
<span class="item">
<i class="el-icon-zoom-in" @click="enlarge()"></i>
</span>
<!-- 删除 -->
<span class="item">
<i class="el-icon-delete" @click="del()"></i>
</span>
</span>
</div>
<!-- 图片上传 -->
<el-upload
v-else
action="#"
class="uploader-avatar"
list-type="picture"
:auto-upload="false"
:show-file-list="false"
:on-change="imgPreview">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- 图片显示对话框 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
imgUrl: '',
dialogVisible: false,
dialogUrl: ''
}
},
methods: {
//图片缩略图
imgPreview: function(file){
//生成临时缩略图
this.imgUrl = URL.createObjectURL(file.raw);
},
enlarge: function(){
this.dialogVisible = true;
this.dialogUrl = this.imgUrl;
},
del: function(){
this.imgUrl = '';
this.dialogUrl = '';
}
}
}
</script>
<style scoped>
.uploader-avatar>>>.el-upload {
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 148px;
height: 148px;
cursor: pointer;
line-height: 146px;
vertical-align: top;
overflow: hidden;
}
.img-show{
position: relative;
border: 1px solid #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 148px;
height: 148px;
cursor: pointer;
overflow: hidden;
}
.uploader-avatar>>>.el-upload:hover {
border-color: #409EFF;
}
.uploader-avatar>>>i {
font-size: 28px;
color: #8c939d;
}
.avatar{
width: 148px;
height: 148px;
display: block;
}
.actions{
position: absolute;
width: 100%;
height: 100%;
line-height: 148px;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0,0,0,.5);
transition: opacity .3s;
}
.actions:hover{
opacity: 1;
}
.actions:hover span{
display: inline-block;
}
.actions span{
display: none;
margin: 0 16px;
cursor: pointer;
}
</style>
效果显示: