JavaScript使用FileReader读取文本文件返回undefined如何解决
问题根因
你的代码存在两个核心错误,和你猜测的File构造函数参数错误有关,但还有更关键的逻辑和安全限制问题:
- 首先是浏览器安全限制+File构造函数用法错误:浏览器端JavaScript运行在沙箱环境中,完全禁止网页直接通过硬编码的本地绝对路径读取用户磁盘上的文件,不存在任何可以直接通过路径读取
C:\Users\riki7\Downloads\classes.txt的API。你写的new File([], "C:\\Users\\riki7\\Downloads\\classes.txt")根本不会关联到磁盘上的目标文件:第一个参数传空数组[]代表你在内存里创建了一个内容为空的新文件,第二个参数只是给这个内存空文件设置的文件名字符串,和磁盘上的同名文件没有任何关联。 - 其次是异步逻辑时序错误:
FileReader.readAsText()是异步操作,调用这个方法后程序不会等待文件读取完成,会立刻往下执行alert(my_text),这时候onload回调还没触发,my_text还没有被赋值,自然会弹出undefined。
正确实现方式
要在浏览器环境读取本地txt文件,必须让用户主动通过文件选择控件选中目标文件,不能硬编码路径读取,同时要在onload回调内部处理读取结果:
- 先在页面中加入文件选择控件
<input type="file" id="fileSelect" accept=".txt">
- 编写对应的JS逻辑
const fileInput = document.getElementById('fileSelect'); fileInput.addEventListener('change', function(e) { // 获取用户主动选中的文件对象,这才是关联了真实文件内容的合法File实例 const targetFile = e.target.files[0]; if (!targetFile) return; let my_text; const reader = new FileReader(); reader.onload = function() { my_text = reader.result; // 读取完成后再操作内容,此时才能拿到a、b、c的文本值 alert(my_text); }; reader.readAsText(targetFile); });
补充说明
如果是Node.js环境(非浏览器),可以直接用fs模块读取路径文件,不需要用File和FileReader这类浏览器专属API,示例代码:
// Node.js环境下可直接读路径,浏览器环境不支持该逻辑 const fs = require('fs'); const my_text = fs.readFileSync("C:\\Users\\riki7\\Downloads\\classes.txt", 'utf-8'); console.log(my_text);
内容的提问来源于stack exchange,提问作者riki
相关产品推荐
相关产品推荐

