嘿，我来帮你梳理下为什么读取上传的txt文件总是拿到空字符串的常见原因和解决办法～

首先，先确认你的代码里有没有踩这些常见坑：

1. 异步读取没等完成就拿结果 #

FileReader 是异步操作，很多人会犯的错是调用readAsText()后立刻去取reader.result，这时候读取还没完成，结果自然是空的。必须等待load事件触发后再获取内容。

2. 没检查是否选中了文件 #

如果用户还没选择文件就触发读取逻辑，input.files[0]会是undefined，这时候读取操作要么报错，要么返回空。一定要先判断文件是否存在。

3. 文件编码不匹配 #

如果你的txt文件是用 GBK、UTF-16 这类非UTF-8编码保存的，默认用UTF-8读取可能会出现解析为空或者乱码的情况，这时候要在readAsText方法里指定对应编码。

4. 文件本身就是空的 #

先本地打开你的txt文件确认下有没有内容，也可以通过file.size判断，如果size为0，那就是文件本身没有内容啦。

给你一个能正常工作的示例代码，你可以对照着调整自己的代码：

HTML 部分 #

<!-- 带txt过滤的文件输入框 -->
<input type="file" id="txtFileInput" accept=".txt">
<!-- 触发读取的按钮 -->
<button onclick="handleReadTxt()">读取文件内容</button>
<!-- 展示内容的区域 -->
<div id="fileContent"></div>

JavaScript 部分 #

function handleReadTxt() {
  const fileInput = document.getElementById('txtFileInput');
  
  // 第一步：检查是否选中了文件
  if (!fileInput.files || fileInput.files.length === 0) {
    alert('请先选择一个txt文件哦');
    return;
  }
  
  const targetFile = fileInput.files[0];
  const reader = new FileReader();
  
  // 读取成功的回调：必须在这个事件里拿结果
  reader.onload = function(event) {
    const content = event.target.result;
    // 把内容展示到页面上
    document.getElementById('fileContent').textContent = content;
    // 也可以打印到控制台查看
    console.log('读取到的文件内容:', content);
  };
  
  // 读取出错的回调：方便排查问题
  reader.onerror = function(error) {
    console.error('文件读取失败:', error);
    alert('读取文件出错，请检查文件是否损坏');
  };
  
  // 开始读取，指定编码为UTF-8（如果你的文件是其他编码，改成对应的就行，比如'GBK'）
  reader.readAsText(targetFile, 'UTF-8');
}

你可以把自己的代码和这个示例对比下，看看哪一步没做到位～

内容的提问来源于stack exchange，提问作者laskdjf