核心是利用slot="file"插槽配合list-type="picture-card"启用缩略图，通过file.url渲染图片/视频/音频等多类型预览，并在on-success或on-change中手动赋值file.url以支持本地预览或服务端回显。
用 Element UI 的 el-upload 实现文件列表中自定义缩略图，核心是利用 slot="file" 插槽 + slot-scope（Vue 2）或 v-slot:file="{ file }"（Vue 3），配合文件类型判断和内联样式控制渲染逻辑。
插槽结构必须用对
不能只写 slot="file" 就完事——它需要包裹在 el-upload 内部，且必须配合 list-type="picture-card" 或 list-type="text" 才会触发该插槽。关键点：
-
list-type="picture-card"是启用缩略图样式的前提，否则slot="file"不生效 - 插槽内容里通过
file.url获取预览地址（本地预览需用URL.createObjectURL(file.raw)赋值） - 不要漏掉
file.name和file.status，它们影响删除、上传状态等交互
区分图片/视频/音频并渲染不同缩略图
Element 默认只支持图片缩略图，但你可以手动扩展：根据 file.type 或 file.raw.type 判断格式，用 v-if 渲染对应标签：
- 图片 →
<img :src="file.url" class="el-upload-list__item-thumbnail"> - 视频 →
<video :src="file.url" controls style="width:100%;height:100%">不支持</video> - 音频 →
<audio :src="file.url" controls style="width:100%">不支持</audio> - 其他文件（如 PDF、DOC）→ 可用 icon 占位，例如
<i class="el-icon-document"></i>
预览弹窗要适配多类型文件
点击放大图标时，el-dialog 不能只写 <img>，否则视频/音频打不开。正确做法是按类型动态切换内容：
- 用
v-if判断dialogType（比如 1=图片、2=视频、3=音频） - 图片用
<img>，视频用<video controls></video>，音频用<audio controls></audio> - 确保
dialogImageUrl指向的是可访问的 URL（服务端回传路径 orURL.createObjectURL()生成的 blob 地址）
注意 file.url 的来源逻辑
file.url 不是自动有的——它依赖你手动赋值：
- 本地预览：在
@on-change或before-upload中调用URL.createObjectURL(rawFile)并赋给file.url - 服务端回显：上传成功后，后端返回文件访问路径，你在
@on-success里把响应中的 URL 赋给file.url - 别忘了清理内存：调用
URL.revokeObjectURL(url)防止内存泄漏（尤其在删除文件时）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
