localstorage不能直接存file对象，需暂存元数据并用url.createobjecturl生成临时引用；submit事件必须e.preventdefault()阻止刷新；文件内容离线存储应使用indexeddb+filereader；网络恢复同步依赖service worker的background sync而非navigator.online。
localStorage 不能直接存 File 对象
File 是 Blob 的子类，而 localStorage.setItem() 只接受字符串。直接传 file 会变成 "[object File]"，后续 JSON.parse() 拿不到任何有用字段。常见错误是写成：localStorage.setItem('pendingFile', file)——这等于什么都没存。
正确做法是只暂存元数据（名称、大小、类型、最后修改时间），再配合 URL.createObjectURL(file) 生成临时引用。但注意：createObjectURL 生成的 URL 在页面刷新后失效，所以它只适合“本次会话内重试”，不能跨页面持久化。
- 必须提取并序列化元数据：
{ name: file.name, size: file.size, type: file.type, lastModified: file.lastModified } - 若需保留文件内容供离线重传，必须用
FileReader读取为ArrayBuffer或 base64，再存进localStorage（仅限小文件，IndexedDB（推荐） -
localStorage存 base64 字符串时，体积膨胀约 33%，且容易触发QuotaExceededError（尤其在 iOS Safari 隐私模式下仅 2MB）
大文件必须用 IndexedDB，不是“可选”而是“必须”
一个 5MB 的 PDF 转成 base64 后约 6.8MB，已超多数浏览器对 localStorage 的实际可用上限。而 IndexedDB 在 Chrome/Firefox/Edge 中默认配额为“无硬限制”（由系统剩余空间动态决定），且支持事务、分块写入、游标遍历——这才是真正能承载待上传文件数据的机制。
关键不是“能不能存”，而是“存完能不能可靠读出来再发出去”。localStorage 没有错误回调，写失败就静默丢弃；IndexedDB 的 request.onerror 和 transaction.onabort 能明确告诉你哪一步崩了。
- 建库时指定版本，避免升级时旧数据不可读：
indexedDB.open('offlineUploads', 2) - 对象仓库（objectStore）建议按文件哈希（如
file.name + file.lastModified）建主键，防止同名覆盖 - 写入前先检查空间：用
navigator.storage.estimate()获取当前配额使用率，>90% 时主动清理过期项或提示用户
submit 事件里不调 preventDefault()，一切逻辑都白写
这是最常被跳过的一步。只要没写 e.preventDefault()，浏览器就会立刻提交表单、刷新页面、终止所有 JS 执行上下文——你刚 new 出来的 FileReader、刚开的 IndexedDB 事务、甚至正在跑的 fetch，全都会被强制中断。
离线暂存必须发生在“阻止原生提交”的前提下，且要确保所有异步操作完成后再结束事件处理。别信 async/await 自动等——如果没显式 await 写入完成，函数就退出了。
- 监听
form.addEventListener('submit', async (e) => { e.preventDefault(); ... }) - 从
input[type="file"]取files[0]，不要直接用event.target.files（IE 兼容性差） - 暂存成功后给用户明确反馈：
alert('已保存至离线队列，网络恢复后自动上传')，而不是静默处理
网络恢复后同步，不能只靠 navigator.onLine
navigator.onLine 只反映设备是否连上 Wi-Fi 或网线，不代表能通服务器。真实场景中，Wi-Fi 连上了但 DNS 挂了、代理异常、防火墙拦截，都会导致 fetch 失败，而 onLine 仍返回 true。
真正可靠的同步时机，只能来自失败请求的兜底重试 + Service Worker 主动调度。页面里可以轮询（每 15 秒 fetch('/health')），但更优雅的是注册 Background Sync：
- 页面加载时注册：
navigator.serviceWorker.ready.then(sw => sw.sync.register('upload-pending')) - Service Worker 中监听
sync事件，从IndexedDB读出待传文件，逐个fetch('/api/upload', { method: 'POST', body: formData }) - 上传成功后，务必在
transaction中delete()对应记录——否则下次 sync 还会再发一遍
复杂点在于文件内容读取和 FormData 构造必须在 Service Worker 环境下完成，而 SW 不支持 File 或 FormData。所以实际方案是：前端把文件转成 ArrayBuffer 存进 IndexedDB，SW 读出 ArrayBuffer 后手动构造 fetch 的 body，并设置 Content-Type 和自定义 header（如 X-File-Name）供后端识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
