React中URL.revokeObjectURL()文件变更时未清除数据问题排查

问题原因 #

你的代码存在两个核心问题：

1. 未判断文件是否存在：初始状态下file为undefined，此时调用URL.createObjectURL(file)会触发错误，可能干扰后续的URL回收逻辑。
2. Blob URL的生命周期特性：当你在新标签页打开旧的Blob URL时，浏览器会保持对该Blob对象的引用，即使原页面调用URL.revokeObjectURL()回收了URL，只要新标签页未关闭，Blob就不会被垃圾回收。刷新该标签页时，旧的Blob URL依然能访问到旧图片数据。

另外，原代码中依赖src状态进行URL回收存在风险：setSrc是异步操作，清理函数捕获的src可能不是当前effect创建的URL，导致回收不准确。

修复方案 #

方案1：优化Blob URL的创建与回收逻辑 #

修改useEffect，添加文件存在判断，并用局部变量保存当前创建的URL，确保回收操作准确：

const [src, setSrc] = useState('')
const [file, setFile] = useState()

useEffect(() => {
  let currentSrc = '';
  // 仅当file存在时才创建URL
  if (file) {
    currentSrc = URL.createObjectURL(file);
    setSrc(currentSrc);
  }

  // 清理函数回收当前创建的URL
  return () => {
    if (currentSrc) {
      URL.revokeObjectURL(currentSrc);
    }
  };
}, [file])

方案2：改用Base64格式生成预览URL #

如果希望更换文件后，旧的预览URL在刷新新标签页时直接失效，可以放弃Blob URL，改用FileReader将文件转为Base64格式：

const [src, setSrc] = useState('')
const [file, setFile] = useState()

useEffect(() => {
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    setSrc(e.target.result);
  };
  reader.readAsDataURL(file);
}, [file])

Base64 URL直接包含图片数据，每次更换文件都会生成全新的URL，旧URL在刷新后不会关联到新文件，彻底解决旧图残留问题。

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