最近有个需求，上传txt文件，读取内容回显。这个网上有现成的，直接用就行，没什么问题。
一、读取txt文件内容
首先整个文件上传标签<input type="file" name="file" id="fileId" @change="check" />
下边是check方法
check(){ var objFile = document.getElementById("fileId") if ((objFile as any)?.value == "") { ElMessage.warning('请选择文件') } var files = (objFile as any)?.files //获取到文件列表 if (files.length == 0) { ElMessage.warning('请选择文件') } else { for (var i = 0; i< files.length; i++) { var nameLiast = files[i]?.name?.split('.') var name = nameLiast[nameLiast.length-1] if(name?.toLowerCase()!=="txt"){ ElMessage.warning('请上传txt文件') return } var reader = new FileReader() //新建一个FileReader reader.readAsText(files[i], "UTF-8") //读取文件 reader.onload = (evt)=> { //读取完文件之后会回来这里 var fileString = evt?.target?.result // 读取文件内容 if(!fileString){ ElMessage.warning('文件内容为空') } this.form.serial_number = fileString } } } }
参考文章链接：www.cnblogs.com/wuhairui/p/…
二、读取word（docx）文件内容
既然txt可以读，那么其他文本文件可以读吗，找了下还真可以（mammoth）。不过使用过程中遇到很多问题，这里记录下。
1、vue-cli 项目下使用
版本情况：vue-cli 5.0.8，"buffer": "^6.0.3", "core-js": "^3.8.3", "mammoth": "^1.5.1", "path": "^0.12.7", "util": "^0.12.4", "vue": "^2.6.14"
安装mammoth：yarn add mammoth引入mammoth：import mammoth from 'mammoth',结果引入就报错
这两个模块找不到，所以手动安装一下：yarn add util path
完了又报一个错
这个需要修改下配置文件
参考链接：www.cnblogs.com/xingqitian/…
这下报错没了 开始往里加代码：<div v-html="serial_number"></div> <button class="upload-btn" style="color:red;"> 上传 <input type="file" name="file" id="fileId" @change="check" /> </button>
check方法：
check() { var objFile = document.getElementById("fileId") var files = objFile?.files //获取到文件列表 for (var i = 0; i < files.length; i++) { var reader = new FileReader() //新建一个FileReader reader.readAsArrayBuffer(files[i]) reader.onload = (evt) => { //读取完文件之后会回来这里 var data = evt?.target?.result // 读取文件内容 mammoth.convertToHtml({ arrayBuffer: data }).then(r => { this.serial_number = r.value }).done() } } },
然后上传doc文件也会报错（mammoth只能上传docx文件）
参考链接：blog.csdn.net/ZMJ_QQ/arti…
然后改传docx文件，这个错误没了，又报buffer找不到
安装buffer：yarn add buffer
main.js中引入
import * as buffer from "buffer";if (typeof window.Buffer === "undefined") { window.Buffer = buffer.Buffer;}
参考链接：www.cnblogs.com/btxlc/p/165…
终于上传成功了。测试了下，对文本图片（插入图片和手绘）表格支持还可以，像一些特殊符号还有图表类的展示不出来。这里常用的两个方法：
1、mammoth.convertToHtml：字面意思，会转成html，包括图片和表格
2、mammoth.extractRawText：只提取里边的文字内容
还有其他转成markdown(mammoth.convertToMarkdown)等格式的。详细见：blog.csdn.net/xilejie/art…
这个是通过发请求读取的：blog.csdn.net/qq_42697806…
由于我们项目是vite搭建的，所以我又放到vite下试了一遍，报错情况不太一样。
2、vite下使用
版本情况："vue": "^3.2.21",
首先安装引入会报
找到报错文件221行，
是说这个东西没拿到，再往上找到了获取的地方
这里打印require('stream'),里边确实没有Stream
安装stream：yarn add stream,再打印发现能拿到了
之后是buffer找不到，同上解决完可以正常读取了。
其他文档读取工具：
PDF：Vue-pdf
Word: mammoth.js
Excel: SheetJS
