React中使用FileReader无法预览图片，状态未更新求助

AI 小北

2026-8-4

问题分析与修复方案

嘿，我一眼就找到问题所在了——你把FileReader的事件名称写错了！

在你的handlePreviewImg函数里，你写的是reader.onLoad，但FileReader的正确加载完成事件是小写的onload（注意字母L是小写）。JavaScript的事件名称是严格区分大小写的，所以这个回调函数根本没有被触发，导致setPreview和setIsDownload完全没执行，状态自然不会更新，预览图也就显示不出来。

修复后的`handlePreviewImg`函数

const handlePreviewImg = (e) => {
  // 先判断是否选中了文件，避免用户取消选择时出错
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();

  // 这里改成小写的onload
  reader.onload = () => {
    // onload事件本身就是读取完成后触发，readyState必然是DONE（2），所以这个判断可以省略
    setPreview(reader.result);
    setIsDownload(true);
  };

  reader.readAsDataURL(file);
  setProductFile(file);
};

额外优化建议

增加文件存在判断：我在代码里加了if (!file) return，防止用户打开文件选择框后又取消选择，导致e.target.files[0]为undefined，调用readAsDataURL时抛出错误。
简化readyState判断：onload事件只会在文件读取完成（readyState=2）时触发，所以原来的if (reader.readyState === 2)判断是多余的，可以删掉，让代码更简洁。