GridFS文件访问必须通过后端代理接口（如/api/files/download?id=xxx），前端fetch不可直连MongoDB或拼接文件名；需确保后端正确设置Content-Type与Content-Disposition，并用URL.createObjectURL()安全处理Blob，及时revoke避免内存泄漏。
Fetch GridFS 文件接口返回 404 或空响应
GridFS 的文件访问不是直接 GET /files/:filename，而是必须通过服务端路由代理（如 Express + gridfs-stream 或 mongodb-gridfs）暴露可读流。React 前端不能直连 MongoDB，更无法绕过 GridFS 的 chunk 存储结构直接请求；所有 fetch 必须指向你自己的后端接口，比如 /api/files/download?id=abc123。
常见错误是把 MongoDB 连接字符串或 GridFS bucket 名当 URL 直接 fetch，结果必然 404 或 CORS 拒绝。确保后端已正确挂载 GridFS 文件读取逻辑，并返回 Content-Type 明确的响应（如 image/png、application/pdf）。
- 后端需设置
res.setHeader('Content-Disposition', 'inline; filename="xxx.jpg"')才能支持预览 - 若后端未透传
Content-Type，fetch 得到的response.blob()可能被浏览器误判为text/plain - 避免在 fetch URL 中拼接中文文件名 —— 后端用
req.query.id或req.params.id更安全
fetch 返回 Blob 后无法正确显示图片或下载
拿到 response.blob() 后不能直接赋值给 <img src>，因为 blob 不是 URL。必须用 URL.createObjectURL() 创建临时对象 URL，且记得在组件卸载或下次调用前调用 URL.revokeObjectURL() 避免内存泄漏。
示例关键片段：
const handleDownload = async () => {
try {
const res = await fetch('/api/files/download?id=65a1f8c2b9d4e71234abcd56');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
// 用于 <img src={url} />
setImageUrl(url);
// 或触发下载
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf'; // 注意：download 属性对跨域 blob 无效，仅适用于同源
a.click();
URL.revokeObjectURL(url); // 立即释放，尤其在频繁操作时
} catch (err) {
console.error(err);
}
};
-
blob.type可能为空，依赖后端是否设置了Content-Type；必要时可手动判断后缀映射 MIME 类型 - 移动端 Safari 对
download属性支持差，建议用window.open(url)实现预览 - 大文件（>100MB）不建议全量加载为 blob，应考虑分片流式渲染或后端直出 CDN 链接
React 组件中管理 Blob URL 的生命周期风险
每次调用 URL.createObjectURL() 都会生成新地址，旧地址不会自动销毁。如果组件重复渲染、多次 fetch、或用户快速切换文件，容易堆积大量未释放的 blob URL，导致内存持续增长甚至卡顿。
- 在
useEffect清理函数中 revoke 上一次 URL：useEffect(() => { return () => url && URL.revokeObjectURL(url); }, [url]) - 不要把 blob 或 blob URL 存进 Redux / Context，它们不是可序列化的值
- 若需缓存多个文件，可用 Map 结构按 ID 管理，并在卸载时批量 revoke
- 开发时可在 Chrome DevTools → Memory → Take heap snapshot，搜索
Blob查看是否泄漏
GridFS 文件名含特殊字符或大小写敏感导致 404
GridFS 本身不存储原始文件名，文件元数据（filename 字段）由应用写入，但查询逻辑完全取决于你的后端实现。很多开发者误以为 findOne({ filename: '测试.pdf' }) 就能查到，却忽略了：MongoDB 默认区分大小写，且某些驱动对 Unicode 处理不一致。
- 后端查询应统一转小写或使用正则
{ filename: { $regex: /^test\.pdf$/i } } - 更可靠的做法是用
_id（ObjectID）作为唯一标识符，前端只传 ID，不传 name - 如果必须按名查，后端入库时就标准化文件名（去空格、转下划线、过滤控制字符），并建立对应索引
- 注意：GridFS 的
files集合中filename是字符串字段，不是路径，不存在层级解析
