如何在JavaScript中使用FileReader.readAsText同步读取文件

DevOps 小满

2026-10-21

核心问题说明

浏览器环境下的FileReader本身就是异步设计的，主线程没有原生支持同步读取本地用户选取文件的API，这是浏览器安全和交互逻辑的底层限制，没有方案可以绕过。
你所说的「必须同步执行」的需求实际是要求后续处理逻辑要等文件读取完成再执行，这个需求完全可以通过调整异步代码的执行顺序实现，不需要强行要求同步阻塞主线程。
你现有代码的错误点在于：uploadFile函数没有加async关键字，readAsTextCust返回的Promise回调还没执行，你就先调用了someMethod，此时变量自然还是初始的空字符串。

修正后的可行代码

方案1：async/await写法（推荐）

<input
id="inputfile"
type="file"
name="inputfile"
onChange={uploadFile} >

const uploadFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const files = event?.target.files;
  let resultSyncOutput = '';
  if (files && files.length > 0) {
    // await等待文件读取完成后再往下执行
    resultSyncOutput = await readAsTextCust(files[0]);
  }
  // 此时已拿到完整结果再执行后续处理
  someMethod(resultSyncOutput);
}

async function readAsTextCust(file) {
  const resultStr = await new Promise((resolve) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => resolve(fileReader.result as string);
    fileReader.readAsText(file);
  });
  console.log(resultStr);
  return resultStr;
}

方案2：回调写法（无需async/await）

const uploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
  const files = event?.target.files;
  if (files && files.length > 0) {
    readAsTextCust(files[0]).then(resultStr => {
      // 后续处理逻辑全部放到回调内，保证拿到结果后再执行
      someMethod(resultStr);
    });
  } else {
    someMethod('');
  }
}