el-upload开启picture形式列表展示上传的非图片文件自定义缩略图

目录

一、背景

二、代码实现

2.1、el-upload的file插槽

2.2、使用原列表class重写内容

2.2.1、重写文件名区域

2.2.2、重写右上角图标

三、整体代码

四、最终效果图

---

一、背景

        在使用el-upload组件开发上传页面时，需要展示已上传文件的缩略图列表，因此选择picture类型的展示列表。因为这是图片的展示，若上传的文件不是图片的话（如tar包、zip包等），列表展示是有问题的。

        后续考虑换下缩略图，固定换一下对应文件的logo，先快速实现功能。

二、代码实现

2.1、el-upload的file插槽

        查看了组件使用文档，发现el-upload提供了一个file的插槽，可以用来替换列表里的内容。使用这个插槽替换列表的缩略图。

        但这样会覆盖本身的组件的这部分全部内容，而我只想替换一下所列图，其他内容：文件名称，右上角的删除保留原来的样式。

        

2.2、使用原列表class重写内容

2.2.1、重写文件名区域

        其实就是用el-upload正常展示的列表的一些class样式。比如文件名称需要这样替换。

<!-- 使用原el-upload里的class样式，这样就会把文件名放到原本的位置 -->
<span class="el-upload-list__item-name"><el-icon><Document /></el-icon>{{ file.name }}
</span>

2.2.2、重写右上角图标

        若使用file插槽替换的，删除列表项的功能需要我们写一个方法自己删除fileList，绑定到图标的click点击事件。

<!-- 这里同样使用原关闭按钮的class样式 -->
<el-icon class="el-icon--close" @click="handleRemove(file)"><Close />
</el-icon>

// 删除上传列表项
function handleRemove(file) {fileListRef.value = fileListRef.value.filter(f => f.uid !== file.uid)
}

三、整体代码

<template><upload-template v-loading="loading" element-loading-text="玩命的处理中，请稍等！"><template #title>上传文件</template><template #content><div class="content-box"><el-uploaddragref="uploadRef":auto-upload="false"method="post":on-change="handleUploadChange":file-list="fileListRef"list-type="picture"><template #file="{ file }"><!-- 缩略图区域 --><imgv-if="file.name.endsWith('.zip')":src="zipLogo"class="el-upload-list__item-thumbnail"/><imgv-else:src="file.url"class="el-upload-list__item-thumbnail"/><!-- 文件名展示 --><span class="el-upload-list__item-name"><el-icon><Document /></el-icon>{{ file.name }}</span><!-- 删除缩略项 --><el-icon class="el-icon--close" @click="handleRemove(file)"><Close /></el-icon></template><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip">只能上传pdf格式文件，文件大小不超过10MB</div></el-upload><div class="upload-footer"><el-button type="default" @click="handleReset">清空上传</el-button><el-button type="primary" @click="handleSubmit">开始处理</el-button></div></div></template></upload-template></template><script setup>
import uploadTemplate from '@/components/img/uploadTemplate.vue'
import { ref, reactive } from 'vue'
import zipLogo from '@/assets/imgs/zipLogo.jpg'const uploadRef = ref(null)
const fileListRef = ref([])
const loading = ref(false)// 有文件上传时（更改上传列表）
function handleUploadChange(file, fileList) {fileListRef.value = fileListElMessage({message: '上传成功！',type:'success',})
}// 删除上传列表项
function handleRemove(file) {fileListRef.value = fileListRef.value.filter(f => f.uid !== file.uid)
}</script><style lang="scss" scoped></style>

四、最终效果图