React图片上传后无法加载问题咨询

架构老林

2026-7-7

图片上传后无法加载的原因及解决方法

问题根源

你直接将File对象（从e.target.files[0]获取）赋值给了<img>的src属性，但浏览器的<img>标签无法直接解析File对象作为图片源——src需要的是可访问的URL、base64编码字符串这类能被浏览器识别的资源路径。

解决方法

方法1：使用`URL.createObjectURL()`（推荐，性能更优）

这个方法会为File对象创建一个临时的浏览器内部URL，直接用于img的src：

const [profile, setProfile] = useState(null);

// 处理文件选择
const handleFileInputChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    // 生成临时URL
    const tempUrl = URL.createObjectURL(file);
    setProfile(tempUrl);
  }
};

// 组件卸载时清理临时URL，避免内存泄漏
useEffect(() => {
  return () => {
    if (profile) {
      URL.revokeObjectURL(profile);
    }
  };
}, [profile]);

方法2：使用`FileReader`转base64字符串

通过FileReader将文件读取为base64编码的字符串，同样可以作为img的src：

const handleFileInputChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => {
      // 将base64结果赋值给profile
      setProfile(event.target.result);
    };
    // 以DataURL格式读取文件
    reader.readAsDataURL(file);
  }
};