Next.js App Router中FileReader的onload事件无法触发问题

你代码里的核心错误是把读取文件的方法reader.readAsDataURL(file)写在了onload回调内部——onload是文件读取完成后才会触发的事件，你不先启动读取操作，回调永远不会执行。

修正后的代码如下：

'use client'; // App Router中使用useState必须加这个指令，确保是客户端组件
import { useState } from 'react';

export default function AvatarUpload() {
  const [avatarPreview, setAvatarPreview] = useState(null);
  const [avatar, setAvatar] = useState(null);

  const OnChange = (e) => {
    const file = e.target.files[0];
    if (!file) return; // 处理未选择文件的情况

    const reader = new FileReader();

    // 先设置onload回调
    reader.onload = () => {
      console.log("hello");
      if (reader.readyState === 2) { // readyState=2表示读取完成
        setAvatarPreview(reader.result);
      }
      setAvatar(file);
    };

    reader.onerror = function (event) {
      console.log("Error reading file:", event.target.error);
    };

    // 最后启动文件读取操作
    reader.readAsDataURL(file);
  };

  return (
    <form className="mt-4 p-2 flex items-center justify-center border-2 border-black">
      <input
        type="file"
        name="avatar"
        id="avatar"
        onChange={OnChange}
        accept="image/*"
      />
      {/* 可选：添加预览图展示 */}
      {avatarPreview && <img src={avatarPreview} alt="Avatar preview" className="mt-2 w-32 h-32 object-cover" />}
    </form>
  );
}

关键修正点：

• 将reader.readAsDataURL(file)移到onload回调外部，确保先启动读取，再等待回调触发
• 增加!file判断，避免用户取消选择文件时的报错
• 加上'use client'指令，App Router中使用useState等客户端API必须声明

内容的提问来源于stack exchange，提问作者rushil ekhande