structuredclone() 是最简洁安全的原生深克隆方式,能完整保留 blob/file 的二进制内容与元数据,但需环境支持(chrome 98+ 等)、确保源为原生实例、业务元数据需单独存储,且 formdata 需转数组后克隆。

structuredClone() 是目前最简洁、安全的原生方式,能真正保留 Blob 和 File 的二进制内容与元数据(如 type、size、name、lastModified),无需手动读取或序列化。但它不是“万能粘贴”,需满足几个关键前提才能稳定工作。
确认浏览器或运行环境支持
Chrome 98+、Firefox 97+、Safari 15.4+、Edge 98+、Node.js 17.0+(18.12+ 默认启用)均原生支持。使用前务必检测:
- 检查函数是否存在:if (typeof structuredClone === 'function') { /* 安全调用 */ }
-
不支持时不要 fallback 到 JSON.stringify()——它会丢掉所有二进制内容,变成
{}或报错 - 可选用轻量 polyfill(如
structured-clonenpm 包),它在旧环境自动模拟结构化克隆逻辑
确保原始 Blob/File 是“干净”的原生实例
structuredClone 只克隆标准自有属性(size、type、name、lastModified 等),不保留自定义字段或 Proxy 封装:
一款AI开发辅助工具,主要用于使用 OpenCLI 工具,可从各类网站及桌面应用中提取数据、下载媒体内容、控制外部 CLI 工具。支持 Bilibili、知乎、小红书、Twitter/X、Reddit、YouTube、Boss直聘、即刻、微博等 30+ 个平台,以及 Cursor、Codex、ChatGPT、Notion 等桌面应用。当用户需要:从社...,适合需要提升相关任务效率的用户。
- ✅ 安全来源:直接来自
input.files[0]、dropEvent.dataTransfer.files[0]、fetch().then(r => r.blob()) - ❌ 不可克隆:给 File 手动添加了
.uploadId或.previewUrl;或用new Proxy(file, {...})包裹过 - ? 正确做法:把业务元数据单独存为普通对象,和 Blob/File 并列,例如:
{ file: input.files[0], metadata: { id: 'abc123', tag: 'avatar' } }
这样 structuredClone 后,文件 + 元数据都能完整保留
克隆后仍可正常使用,但 object URL 需重生成
克隆产生的新 Blob/File 实例与原实例共享底层字节(零拷贝),所以性能好、内存友好:
- 克隆后的
file instanceof File仍为true,可直接传入FormData.append('file', clonedFile) -
clonedBlob.size、.type、clonedFile.name、.lastModified全部一致 - ⚠️ 注意:
URL.createObjectURL(originalBlob)生成的地址,对克隆后的 Blob **完全无效** - 需要单独为克隆体再调一次:
const newUrl = URL.createObjectURL(clonedBlob),用完记得URL.revokeObjectURL(newUrl)
处理 FormData:先解构,再克隆
structuredClone 不能直接克隆 FormData(它不属于可结构化类型),但可以轻松绕过:
- 用
Array.from(formData.entries())转成键值对数组,例如:[['title', 'report'], ['file', blob], ['note', 'urgent']] - 对该数组调用
structuredClone()—— 因为 blob 已是可克隆值,整个数组会被完整复制 - 需要还原时,新建 FormData 并遍历插入:
const newForm = new FormData(); clonedEntries.forEach(([k, v]) => newForm.append(k, v))










