为何JSON.stringify()仅返回部分值？FileReader场景下的技术问题排查

你遇到的这个问题核心在于FileReader的异步特性，咱们来拆解一下代码的执行流程：

1. 你的forEach循环是同步执行的：每遍历一个文件，会先同步执行images.push(srcData)，然后调用reader.readAsDataURL(file)——这个方法是异步的，它不会阻塞代码继续执行，而是在后台读取文件，等读取完成后才会触发onloadend回调。
2. 当整个forEach循环跑完，你立刻执行JSON.stringify({ images })，这时候所有reader.onloadend回调还没来得及执行（文件读取还在后台进行），所以images数组里只有你同步push进去的srcData值，也就是你看到的那两个路径字符串。
3. 等后续文件读取完成，reader.result才会被push到images里，但这时候JSON.stringify已经执行完了，自然不会捕获到这些后续添加的值。

要解决这个问题，你需要等所有文件的读取操作都完成后，再去执行JSON.stringify。可以用Promise.all来统一管理所有异步的文件读取任务：

async function processFiles(files) {
  const images = [];
  const promises = [...files].map(file => {
    // 把每个FileReader包装成Promise
    return new Promise((resolve) => {
      const reader = new FileReader();
      const srcData = file.webkitRelativePath;
      reader.onloadend = function () {
        // 按你的逻辑先push路径，再push读取结果
        images.push(srcData);
        images.push(reader.result);
        resolve();
      };
      reader.readAsDataURL(file);
    });
  });

  // 等待所有文件读取任务完成
  await Promise.all(promises);
  
  // 现在所有值都已经存入images数组了
  const temp = JSON.stringify({ images });
  console.log(temp);
}

// 调用函数，传入你的files对象
processFiles(files);

这样修改后，只有当所有文件都读取完成、对应的reader.result都被push到images数组后，才会执行JSON.stringify，就能得到包含所有预期值的JSON字符串了。

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