vue3附件预览

### 实现文件预览功能 在 Vue 3 中实现文件（附件）预览功能可以通过结合 `el-upload` 组件以及特定的处理逻辑来完成。对于不同类型的文件，如图片、PDF 或 Excel 文件，有不同的方法来进行预览。 #### 图片预览 为了实现在选择图片之后立即显示其缩略图的效果，可以在上传组件中监听 `change` 事件，并通过 URL.createObjectURL 方法创建临时链接用于展示图像[^1]： ```javascript // 处理图片预览的方法 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; } ``` #### PDF 预览 针对 PDF 文档，则推荐使用 pdf.js 库来解析和渲染文档页面。此库能够很好地适应大多数现代浏览器环境下的 PDF 显示需求: 安装依赖： ```bash npm install --save pdfjs-dist ``` 编写相应代码片段以加载并呈现 PDF 内容： ```html <object :data="pdfUrl" type="application/pdf" width="100%" height="600px"></object> ``` #### Excel 表格预览 当涉及到 Excel 文件 (XLS/XLSX)，可以采用 SheetJS (xlsx) 来读取电子表格数据，并借助 Handsontable 或其他类似的可视化插件将其转换成 HTML table 进行展示[^2]。另外一种更简便的方式是在线查看器服务 API 如 Google Docs Viewer, Office Online Server 等，它们允许开发者轻松集成到自己的应用程序里去。 如果希望完全自主控制整个流程而不依赖第三方平台的话，那么就需要考虑构建一个完整的解决方案链路——从前端发起请求获取二进制流直至最终呈现在界面上；这期间可能还会涉及跨域资源共享(CORS), MIME 类型设置等问题需要解决。 #### 使用 el-upload 和自定义指令简化操作 Element Plus 提供了一个非常方便实用的上传控件叫做 `el-upload`, 它不仅支持拖拽上传还具备丰富的回调函数帮助我们更好地管理文件交互过程中的各个阶段状态变化。配合上一些简单的 CSS 样式调整就能快速搭建起美观大方又易于使用的界面布局结构了。 此外还可以利用 Vue 自定义指令特性进一步增强用户体验感，比如自动聚焦输入框、限制文件大小范围等功能都可以很容易地被封装进去形成通用模块以便日后重复调用减少冗余编码工作量。 ```vue <template> <div class="upload-demo"> <!-- ... --> <el-button @click="submitUpload">提交</el-button> <el-button type="primary" @click="dialogTableVisible=true">点击打开对话框</el-button> <el-dialog :visible.sync="dialogTableVisible"> <img v-if="fileType === 'image'" :src="previewSrc"/> <iframe v-else-if="['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(fileType)" :src="'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(previewSrc)" frameborder="0" style="width:100%;height:500px;"></iframe> <embed v-else-if="fileType === 'application/pdf'" :src="previewSrc" type="application/pdf" /> </el-dialog> </div> </template> <script> export default { data() { return { dialogTableVisible: false, previewSrc: '', fileType: '' }; }, methods: { handleFileChange(file){ const { raw } = file; let reader = new FileReader(); reader.onloadend=(e)=>{ this.previewSrc=e.target.result; if(raw.type.startsWith('image')){ this.fileType='image'; } else{ this.fileType=raw.type; } this.dialogTableVisible=true; }; if(['application/pdf','application/msword', 'application/vnd.ms-powerpoint', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ].indexOf(raw.type)>-1 || raw.name.endsWith('.doc')||raw.name.endsWith('.ppt')){ this.previewSrc=URL.createObjectURL(raw); this.handleFileChange({raw}); } else if(raw.type.startsWith('image')){ reader.readAsDataURL(raw); } else{ alleet(`不支持该类型(${raw.type})`); } } } }; </script> ```