React Dropzone图片预览偶现ERR_FILE_NOT_FOUND报错如何解决

云原生阿岚

2026-8-28

问题核心原因

同一张图片偶发预览失败、提示blob地址找不到，本质是Blob URL的生命周期和图片加载时机出现竞态：Blob URL是浏览器基于内存中的File/Blob对象生成的临时访问地址，一旦对应的对象被垃圾回收、或者主动调用URL.revokeObjectURL()释放了地址引用，再访问这个地址就会抛出ERR_FILE_NOT_FOUND错误，偶发是因为加载和回收的先后顺序不固定。

排查方向

检查URL.revokeObjectURL()的调用位置：如果把回收逻辑写在onDrop回调同步执行、上传接口请求回调、或者state更新的同步链路里，会出现地址刚生成就被回收的情况，图片加载请求如果在回收前发出就能正常显示，在回收后发出就会报错。
检查Blob URL的存储位置：如果生成的URL存在组件局部变量、没有存入state，组件因为props/state变化重渲染时，局部变量会重置，旧URL可能被浏览器自动回收，而img标签如果还持有旧URL的引用就会加载失败。
检查闭包陷阱：如果onDrop回调没有用useCallback包裹、或者依赖项配置错误，回调中可能引用到上一轮渲染周期里已经被回收的File对象，基于失效对象生成的URL自然无法访问。
检查React18严格模式的影响：严格模式下组件会重复挂载、effect会重复执行，如果回收逻辑的依赖配置错误，可能在第一次挂载时就把刚生成的预览URL回收。
检查全局清理逻辑：确认项目中没有第三方脚本、全局工具函数批量回收页面所有Blob URL的逻辑，避免预览用的URL被误回收。

修复方案

规范Blob URL的回收时机：仅在两个场景调用回收方法——一是选中新文件、需要替换旧预览图时，回收旧的预览URL；二是组件卸载时，回收当前正在使用的预览URL。绝对不要在文件选中后的同步流程、上传流程中提前回收。
将生成的预览URL存入组件state，不要用局部变量存储，保证重渲染时img标签拿到的始终是有效的最新URL，参考实现代码：

import { useCallback, useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';

export default function ImageUpload() {
  const [previewSrc, setPreviewSrc] = useState('');

  const onDrop = useCallback((acceptedFiles) => {
    // 替换新文件前先回收旧地址，避免内存泄漏
    if (previewSrc) URL.revokeObjectURL(previewSrc);
    const targetFile = acceptedFiles[0];
    // 基于最新选中的文件生成临时URL，直接存入state
    const objectUrl = URL.createObjectURL(targetFile);
    setPreviewSrc(objectUrl);
  }, [previewSrc]);

  // 组件卸载时回收当前预览地址
  useEffect(() => {
    return () => {
      if (previewSrc) URL.revokeObjectURL(previewSrc);
    };
  }, [previewSrc]);

  const { getRootProps, getInputProps } = useDropzone({
    accept: { 'image/*': [] },
    onDrop
  });

  return (
    <div className="upload-container">
      <div {...getRootProps()} style={{ border: '1px dashed #999', padding: '2rem', cursor: 'pointer' }}>
        <input {...getInputProps()} />
        <p>点击或拖拽图片到此处上传</p>
      </div>
      {previewSrc && (
        <img 
          src={previewSrc} 
          alt="上传预览图" 
          style={{ maxWidth: 300, marginTop: '1rem' }}
        />
      )}
    </div>
  );
}

正确配置useCallback和useEffect的依赖项，避免闭包引用旧的File对象、旧的URL地址，React18严格模式下不要在effect的初始化逻辑里提前执行URL回收。
同一张图片重复选择时，不要复用之前生成的旧Blob URL，每次选中都基于最新的File对象重新生成URL，避免旧URL已经被回收导致加载失败。

内容的提问来源于stack exchange，提问作者Zabeeh Ullah Yousafxai