FileReader onload异步问题：数组长度为0但数据已存入

核心问题：FileReader的异步特性 #

你遇到的情况本质是FileReader.readAsDataURL()是异步操作。当你在循环里创建reader并绑定onload事件时，这些onload回调不会立即执行——它们要等文件读取完成后才会触发。而你写在onload外面的数组长度打印代码，会在所有reader的读取操作启动前（或过程中）就先执行，此时数组还没被push任何数据，所以长度显示为0。

至于之后能输出数据，是因为你后续打印数组的时机晚于onload回调的执行时间（比如手动在控制台查看时，异步操作已经完成）。

修复方案 #

方案1：用Promise+async/await处理异步逻辑 #

把单个文件的读取操作包装成Promise，再用Promise.all等待所有文件读取完成，就能确保在所有base64数据存入数组后再执行后续代码：

async function handleFiles(files) {
  const base64Array = [];
  const readPromises = Array.from(files).map(file => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => {
        base64Array.push(reader.result);
        resolve();
      };
      reader.readAsDataURL(file);
    });
  });

  // 等待所有文件读取完成
  await Promise.all(readPromises);
  // 这里打印数组长度正常
  console.log(base64Array.length);
  return base64Array;
}

// 调用示例：假设input元素id为fileInput
document.getElementById('fileInput').addEventListener('change', async (e) => {
  const base64Data = await handleFiles(e.target.files);
  console.log(base64Data);
});

方案2：使用回调函数 #

如果不想用async/await，也可以在所有文件读取完成后触发回调：

function handleFiles(files, callback) {
  const base64Array = [];
  let completedCount = 0;
  const totalFiles = files.length;

  if (totalFiles === 0) {
    callback(base64Array);
    return;
  }

  Array.from(files).forEach(file => {
    const reader = new FileReader();
    reader.onload = () => {
      base64Array.push(reader.result);
      completedCount++;
      // 所有文件读取完成后执行回调
      if (completedCount === totalFiles) {
        callback(base64Array);
      }
    };
    reader.readAsDataURL(file);
  });
}

// 调用示例
document.getElementById('fileInput').addEventListener('change', (e) => {
  handleFiles(e.target.files, (base64Data) => {
    console.log(base64Data.length); // 这里长度正常
    console.log(base64Data);
  });
});

补充说明 #

• 别试图用同步方式等待FileReader完成，浏览器的文件读取API本身就是异步设计的，强行同步会阻塞主线程导致页面卡顿。
• 如果你之前是在循环结束后直接打印数组长度，那这条打印语句的执行顺序一定早于所有onload回调，所以长度为0是必然结果。

内容的提问来源于stack exchange，提问作者Hassan Muhammad Sabir