element-plus el-upload 自定义缩略图

先看效果：

    鼠标未经过时：                                     鼠标经过时：

<template>
	<div class="container">
		<el-upload v-model:file-list="fileLists" multiple :http-request="httpRequest" list-type="picture-card">
			<el-link type="primary">选择附件</el-link>
			<template #file="{ file }">
				<div>
					<img class="el-upload-list__item-thumbnail" src="../../../../assets/images/excel.jpg" alt="" />
					<div style="margin-top: -18px; font-size: 12px; text-align: center; overflow: hidden">{{ file.name }}</div>
					<span class="el-upload-list__item-actions">
						<span class="el-upload-list__item-delete" @click="handleDownload(file)">
							<el-icon><Download /></el-icon>
						</span>
						<span class="el-upload-list__item-delete" @click="handleRemove(file)">
							<el-icon><Delete /></el-icon>
						</span>
					</span>
				</div>
			</template>
		</el-upload>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

//文件列表
const fileLists = ref([]);

//根据id获取附件并处理数据
const GetAttachmentById = async (id:any) => {
	const res = await api(id);
	let fileList: any = [];
	res.data.map((item: any) => {
		let newItem: any = {};
		newItem.id = item.Id;
		newItem.name = item.Name;
		newItem.url = item.URL;
		fileList.push(newItem);
	});
	fileLists.value = fileList;
};

//上传附件
const httpRequest = async (data: any) => {
	const formData = new FormData();
	formData.append('File', data.file);
	const res = await api(formData );
	ElMessage.success('上传成功');
};

//移除附件
const handleRemove = (file: any) => {
	ElMessageBox.confirm(`您确认删除 "${file.name}" 吗？如果删除则数据不可恢复，请谨慎操作！`, '信息', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await api(file.id)
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

//下载已上传附件
const handleDownload = async (file: any) => {

};
</script>

<style lang="scss" scoped>
:deep(.el-upload-list) {
	flex-direction: row-reverse !important;
	.el-upload--picture-card {
		width: 56px;
		height: 24px;
		margin-right: 20px;
		border: none;
		background-color: #fff;
	}
	.el-upload-list__item {
		width: 101px;
		height: 104px;
		position: relative;
		border: none;
		.el-upload-list__item-actions {
			span {
				margin: 0 9px !important;
			}
		}
	}
}
</style>