--- theme: fancy --- ## 起步在计算机的世界中，有各种各样的文件，文件类型千奇百怪，作为一名前端开发工程师，我们如何来实现这些文件的在线预览呢？在上篇文章，我们已经实现了[前端如何实现压缩包解析？](https://juejin.cn/post/7435858473937207330)，但是也仅仅是能够查看压缩包中的内容，并不能真实的去进行线上预览，这节就是在上节的基础上，举例一些我们日常经常接触的文件来进行预览： 1. 文本类文件（虽然类型很多，但是处理方式基本都是一样的） ```js const txtType = ['txt','html','htm','asp','jsp','js','xml','json','properties','md','gitignore','log','java','py','c','cpp','sql','sh','bat','m','bas','prg','cmd','vue','ts','tsx','yml','yaml','css',]; ``` 2. 图片`const pictureType = ['jpg', 'png', 'gif','webp'];` 3. 音视频文件（这里以.mp4举例） 4. office文件 ```javascript const wordType = ['docx', 'doc']; // word const excelType = ['xls', 'xlsx']; // excel const pptType = ['ppt', 'pptx']; //ppt ``` 回顾一下，上节我们已经完成的页面，可以看作左右两部分，左侧为我们解析出来的压缩包内文件的树结构，右侧为我们需要预览的文件。 ![1.jpg](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/eb87919e056643f69260599fe923b473~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTeacqA==:q75.awebp?rk3s=f64ab15b&x-expires=1761646418&x-signature=BxMpN74RkS4%2Bok2mVqrdZquHvQg%3D) 我们监听了树的点击事件当点击某个文件的时候能够拿到这个文件的相关信息，包括File对象。我们的dom结构大概是这样的，根据我们当前点击的文件类型展示不同的元素。 ```html

{{ textContent }}

.....

``` 那么我们如何读取文件的内容呢？这里我们需要用到一个api，[FileReader - Web API | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader) > **`FileReader`** 接口允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 或 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 对象指定要读取的文件或数据。调用这个构造函数会返回一个实例，通过这个实例我们就能将文件读取成任何我们想要的类型了。 ### 1.文本类文件 ```js // 文本内容 const textContent: string = ref('') const reader: any = new FileReader() // 文本文件，直接使用readAsText将文件读取为文本再展示即可 if (txtType.some((item) => item == fileType)) { reader.readAsText(file) reader.onload = () => textContent.value = reader.result } ``` ![2.jpg](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fbb9226ec4a14af5be1e8997dcb3744e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTeacqA==:q75.awebp?rk3s=f64ab15b&x-expires=1761646418&x-signature=RzyW9V7E2xEtdkfSkim%2F7YxwPoE%3D) ### 2. 图片类文件将文件读取为base64的字符串，直接借助浏览器的img标签展示即可展示。 ```javascript const reader: any = new FileReader() // 图片 if (pictureType.some(item => item == fileType)) { reader.readAsDataURL(file) reader.onload = () => currentFile.value.url = reader.result } ``` ![3.jpg](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ce6e79545e5e4af8bb8bb3b8ac5e60e3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTeacqA==:q75.awebp?rk3s=f64ab15b&x-expires=1761646418&x-signature=MWCzJdJUds%2BEOKJktdzA1R5%2BDtY%3D) ### 3. 音视频类文件音视频文件的预览直接使用对应的标签即可，即