Vue 3 文件上传后在线预览需按类型分治：图片用 createObjectURL + img/el-image；PDF 用 iframe 或 PDF.js；Excel 用 xlsx 解析为 HTML；文本类用 FileReader 读取并 pre 标签展示，兼顾性能与安全。
Vue 3 中实现文件上传后的在线预览，核心在于“根据文件类型选择合适预览方式”，而不是用统一方案硬套所有格式。图片、PDF、Excel、文本类文件的处理逻辑差异明显，需分类响应。
图片类文件：直接渲染 <img> 或 <el-image>
这是最轻量、最直观的方式。用户选择图片后，用 URL.createObjectURL 生成临时本地地址，立即显示缩略图或全屏预览。
- 选中文件时调用
createObjectURL(file)，绑定到src属性 - 使用
<el-image>可支持放大、加载占位、错误兜底等体验优化 - 上传成功后，建议用服务端返回的真实 URL 替换临时地址，避免页面刷新后失效
PDF 文件：嵌入 <iframe> 或使用 PDF.js
浏览器原生支持 PDF 渲染，但兼容性和交互能力有限。简单场景可用 iframe 直接加载；若需高亮、搜索、页码跳转等能力，推荐集成 pdfjs-dist。
- 临时预览：设置
iframe src为createObjectURL(file) - 生产环境建议：上传后由后端返回 PDF 的可访问链接（如 MinIO、OSS 地址），再传给 iframe，避免大文件阻塞主线程
- 如需自定义渲染，PDF.js 提供
getDocument+render流程，配合 Vue 的响应式更新即可控制页码与缩放
Excel 文件：转 HTML 表格字符串展示
不依赖后端转换服务，纯前端解析 Excel 内容并结构化呈现。推荐使用 xlsx 库的 sheet_to_html 方法。
立即学习“前端免费学习笔记（深入）”；
- 读取文件二进制内容（
readAsBinaryString或arrayBuffer） - 用
XLSX.read(...)解析工作簿，取首张表（或提供 sheet 切换） - 调用
XLSX.utils.sheet_to_html(worksheet)得到带样式标签的 HTML 字符串 - 用
v-html渲染（注意 XSS 风险，仅限可信源文件；如需安全过滤，可搭配DOMPurify）
文本类（TXT、CSV、LOG 等）：读取内容后展示在 <pre> 或代码块中
适合查看日志、配置、简单数据。用 FileReader.readAsText() 读取，保留换行与空格，提升可读性。
- 限制预览大小（如前 1MB），避免大文件导致页面卡顿
- 配合
white-space: pre-wrap和滚动容器，确保格式不塌陷 - CSV 可进一步用
papaparse转为表格，增强可读性
预览不是上传的终点，而是用户体验的关键一环。按类型分治、控制资源消耗、兼顾安全与性能，才能让预览真正“在线”且可靠。
