如何在FileReader的onload函数外部访问文件内容？

因为FileReader的文件读取是异步操作，onload回调会在文件读取完成后才触发，直接在回调外部写代码访问内容，会因为读取还没完成拿不到有效值。下面是几种可行的解决方案：

1. 用回调函数处理逻辑 #

把需要用到文件内容的业务逻辑抽成单独的函数，在onload回调里调用这个函数并传入文件内容，确保逻辑在读取完成后执行。

function testZ() {
  var entireFile = document.getElementById("input").files[0];
  var reader = new FileReader();
  reader.readAsText(entireFile, "UTF-8");
  
  // 定义处理文件内容的函数
  function handleFileContent(content) {
    console.log("处理文件内容:", content);
    // 这里写你需要用文件内容实现的逻辑
  }

  reader.onload = function (e) {
    var rawLog = reader.result;
    console.log(rawLog);
    // 读取完成后调用处理函数
    handleFileContent(rawLog);
  };
}

2. 用Promise + async/await（更简洁的异步写法） #

把FileReader的读取过程包装成Promise，再配合async/await让异步代码看起来像同步逻辑，避免回调嵌套。

// 封装文件读取的Promise函数
function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file, "UTF-8");
  });
}

async function testZ() {
  var entireFile = document.getElementById("input").files[0];
  if (!entireFile) return; // 先判断是否选中了文件
  
  try {
    // 等待文件读取完成
    var rawLog = await readFileAsText(entireFile);
    console.log(rawLog);
    // 这里可以直接访问文件内容，后续代码会在读取完成后执行
    console.log("外部访问文件内容:", rawLog);
    // 写你的业务逻辑
  } catch (err) {
    console.error("读取文件失败:", err);
  }
}

3. 不推荐：使用全局变量（谨慎使用） #

可以把文件内容赋值给全局变量，但这种方式容易出现竞态问题（比如在读取完成前就访问全局变量，依然拿不到有效值），仅适合简单测试场景，复杂项目不建议使用。

let globalFileContent; // 全局变量

function testZ() {
  var entireFile = document.getElementById("input").files[0];
  var reader = new FileReader();
  reader.readAsText(entireFile, "UTF-8");
  
  reader.onload = function (e) {
    globalFileContent = reader.result;
    console.log(globalFileContent);
    // 必须等回调执行完，才能调用使用全局变量的函数
    useGlobalContent();
  };
}

function useGlobalContent() {
  console.log("全局变量中的文件内容:", globalFileContent);
}

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