JavaScript中重置FileReader内容及重复加载文件对象异常问题

嘿，我完全懂你现在遇到的糟心问题——每次选新文件加载解析，结果总是第一次生成的那个对象，这肯定让你摸不着头脑对吧？咱们来把问题拆解清楚，然后快速搞定它！

问题根源 #

你把objID和myArray声明成了全局变量，而且每次调用readBlob时都没有重新初始化它们。这就导致第一次加载文件后，这两个变量里已经存了数据，后续再加载新文件时，要么是在原有数据上直接修改/追加，要么因为闭包引用的问题，始终拿到的是第一次创建的对象引用，自然看起来每次都是同一个结果。另外你代码里的reader.onload用了立即执行函数，但其实没正确处理文件读取后的内容获取逻辑，这也可能加重问题。

解决方案：把变量本地化 + 修正读取逻辑 #

核心思路就是让每次文件读取都使用全新的对象和数组，同时正确处理FileReader的读取结果。下面是修正后的完整代码：

HTML（保持不变）

<input type="file" id="files" name="files"/>

JavaScript

function readBlob() {
  // 把对象和数组移到函数内部，每次调用都创建全新的实例
  const objID = {};
  const myArray = [];
  
  const files = document.getElementById('files').files;
  // 先判断有没有选文件
  if (!files.length) {
    alert('请先选择一个文件哦');
    return;
  }
  const file = files[0];
  const reader = new FileReader();

  // 修正onload逻辑，直接通过事件对象拿到读取结果
  reader.onload = function(e) {
    try {
      // 获取文件读取后的文本内容（如果是二进制文件要换读取方式）
      const fileContent = e.target.result;
      // 这里根据你的文件格式做解析，假设是JSON格式
      const parsedData = JSON.parse(fileContent);
      
      // 按照你的需求把解析后的数据转成objID和myArray
      // 举个示例，你可以根据实际结构调整
      Object.assign(objID, parsedData.userInfo); // 假设数据里有userInfo对象
      myArray.push(...parsedData.list); // 假设数据里有list数组
      
      // 打印看看是不是新的结果了
      console.log('当前解析的对象:', objID);
      console.log('当前数组:', myArray);
    } catch (err) {
      console.error('文件解析出错啦:', err);
    }
  };

  // 读取文本文件，要是其他格式（比如二进制）换对应的方法，比如readAsArrayBuffer
  reader.readAsText(file);
}

// 给文件输入框绑定change事件，选完文件自动触发读取
document.getElementById('files').addEventListener('change', readBlob);

关键调整点说明 #

1. 变量本地化：把objID和myArray放到readBlob函数内部，每次用户选择新文件，都会创建全新的对象和数组，彻底和上次的数据划清界限。
2. 简化onload逻辑：不用复杂的立即执行函数捕获文件，直接通过e.target.result就能拿到FileReader读取后的内容，更清晰。
3. 增加错误处理：用try/catch包裹解析逻辑，避免文件格式不对时直接崩溃，还能看到错误信息。
4. 自动触发读取：绑定change事件，用户选完文件就自动执行读取，不用手动调用函数，更符合交互习惯。

额外提示 #

如果你的文件不是JSON格式（比如CSV、纯文本），记得把解析逻辑换成对应的方式——比如CSV可以用字符串分割来处理，纯文本就直接按你的规则提取数据就行。

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