React+TS中FileReader仅调试时生效，图片转Base64存数组失败

你的问题出在两个核心点：

1. 复用同一个FileReader实例：循环里每次处理图片都用同一个reader对象，后面的readAsDataURL会打断前面的读取操作，最终只有最后一张图的结果能被正确捕获；同时重复绑定load事件，会导致触发时多次执行push操作，数据逻辑混乱。
2. 异步执行时机不匹配：readAsDataURL是异步方法，循环是同步执行的——正常运行时，循环已经跑完了，但图片的Base64转换还没完成，load事件没触发，所以imgs数组里没有数据；而调试时因为断点停顿，异步操作有足够时间完成，load事件触发后数据才被push进去。

关键修复点 #

• 循环内部每次创建新的FileReader实例，避免不同图片的读取操作互相干扰；
• 优先使用React状态（useState）代替全局变量存储图片数据——全局变量不会触发组件重新渲染，就算数据存进去了，UI也不会同步更新，这是React开发里的常见坑。

修改后的代码示例 #

import { useState } from 'react';

// 组件内部定义状态
const [imgs, setImgs] = useState<string[]>([]);

return (
  <Input 
    type="file" 
    accept='image/*' 
    onChange={(e) => {
      const files = e.target.files ?? [];
      // 用临时数组存储本次上传的图片，避免频繁更新状态
      const newUploadImgs: string[] = [];
      
      for (const image of files) {
        // 每次循环创建独立的FileReader实例
        const reader = new FileReader();
        reader.readAsDataURL(image);
        reader.addEventListener("load", function () {
          const srcImage = reader.result as string;
          newUploadImgs.push(srcImage);
          // 所有图片处理完成后，统一更新状态
          if (newUploadImgs.length === files.length) {
            setImgs(prevState => [...prevState, ...newUploadImgs]);
          }
        });
      }
    }} 
    multiple>
  </Input>
);

若坚持使用全局变量的修改方式 #

如果一定要保留全局变量，至少要保证每次循环创建新的reader实例，避免操作冲突：

// 全局变量
let imgs: string[] = [];

// onChange回调部分
onChange={(e) => {
  const files = e.target.files ?? [];
  for (const image of files) {
    const reader = new FileReader(); // 每次循环新建独立实例
    reader.readAsDataURL(image);
    reader.addEventListener("load", function () {
      const srcImage = reader.result as string;
      imgs.push(srcImage);
      // 注：若需同步更新UI，仍需结合React状态实现
    });
  }
}}

内容的提问来源于stack exchange，提问作者Patricia García