【el-upload】el-upload组件 - list-type=“picture“ 时，文件预览展示优化

问题图

el-upload

<el-uploadref="upload"multipledragaction="#":auto-upload="false":file-list="fileList"name="files":accept="`.png,.jpg,.jpeg,.JGP,.JPEG,.PNG,.doc,.docx,.xls,.xlsx${isTz ? ',.mp4,.MP4' : ''}`":on-change="beforeAvatarUpload"list-type="picture"
><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">支持上传png/jpg/jpeg/doc/docx/xls/xlsx文件，且不超过5M</div><!-- 【使用组件】 --><div slot="file" slot-scope="{ file }"><PicturePreview :file="file" @remove="removeFile" /></div>
</el-upload>import PicturePreview from '@/components/PicturePreview'components:{PicturePreview}removeFile(file) {this.$refs.upload.handleRemove(file)
},

预览组件 PicturePreview

<!-- el-upload组件 - list-type="picture" 时，文件预览展示优化 -->
<template><div class="file_container"><div class="file"><el-imagev-if="/(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType)":src="file.url":preview-src-list="[file.url]"/><i v-else class="el-icon-tickets" /></div><div class="name">{{ file.name }}</div><i class="el-icon-close" @click="$emit('remove', file)" /></div>
</template><script>
export default {name: 'PicturePreview',components: {},props: {file: {type: Object,required: true}},data() {return {}},computed: {fileType() {return this.file.name.split('.').pop()}},watch: {},created() {},methods: {}
}
</script><style lang='scss' scoped>
.file_container {position: relative;.file {$size: 80px;width: $size;height: $size;background-color: #f7f7f7;position: absolute;left: -85px;top: -5px;display: flex;align-items: center;justify-content: center;.el-image {width: 100%;height: 100%;}.el-icon-tickets {font-size: 30px;}}.name {}.el-icon-close {position: absolute;top: 5px;right: 5px;font-size: 10px;}
}
</style>

效果展示