localstorage不能存储file对象，只能保存文件元信息（如name、size、type等）或通过filereader转为base64/text字符串；预览url需内存维护，刷新后须重新选择文件并用formdata上传。
localStorage 不能存文件对象，必须转成可序列化格式
直接把 File 对象塞进 localStorage.setItem() 是无效的——它会被转成 "[object File]" 字符串，再读出来就是空壳。浏览器本地存储（localStorage / sessionStorage）只支持字符串值，而 File 是二进制 Blob 类型，无法原样保存。
常见错误现象：
– 页面刷新后“已选文件”列表消失，但表单其他字段还在
– 控制台没报错，但 localStorage.getItem('files') 返回 null 或解析失败
– 尝试 JSON.stringify(file) 报错 TypeError: Converting circular structure to JSON
- 真正能存的是文件元信息：文件名、大小、类型、最后修改时间（用
file.name、file.size、file.type、file.lastModified） - 如果需要保留文件内容（比如预览图、文本内容），得手动读取：
FileReader读成 base64 或text，再存字符串 - 大文件（>2MB）慎用 base64 存 localStorage，容易超限（通常 5–10MB）或拖慢页面
多步骤中如何“记住”用户已选但未提交的文件
核心思路是：**不存文件本身，只存“用户意图”和必要元数据，上传动作延迟到最终提交时统一执行**。
推荐做法是用一个轻量 JS 对象缓存每步的文件选择状态，key 按步骤命名（如 'upload-step2-files'），值为数组，每个元素含：
-
name（必填，用于展示和后端校验） -
size（可选，用于 UI 提示） -
type（可选，用于 MIME 校验） -
lastModified（可选，辅助去重） -
previewUrl（可选，URL.createObjectURL(file)生成，仅当前会话有效）
示例保存逻辑：
const fileInput = document.getElementById('step2-file');
fileInput.addEventListener('change', () => {
const files = Array.from(fileInput.files);
const metaList = files.map(f => ({
name: f.name,
size: f.size,
type: f.type,
lastModified: f.lastModified,
// previewUrl 不存入 localStorage，只保留在内存中
}));
localStorage.setItem('myForm-step2-files', JSON.stringify(metaList));
});
注意：previewUrl 是内存引用，关 tab 就失效，不要存进 localStorage；恢复时需重新调用 URL.createObjectURL()（但原始 File 已丢失，所以只能靠后端上传后返回 URL 做真实预览）。
刷新后怎么还原文件选择框的“已选”状态？
不能。HTML 的 <input type="file"> 是只写控件，JS 无法通过 .value 或 .files 属性反向赋值（安全限制）。所谓“还原”，其实是 UI 层模拟：读取 localStorage 中的文件元信息，动态渲染一个只读的文件列表，并隐藏原 input，让用户感知“还在”。
关键点：
- 不要尝试
fileInput.value = 'xxx'—— 浏览器会忽略，且现代 Chrome/Firefox 会清空files集合 - 恢复时，用
localStorage.getItem('myForm-step2-files')解析出文件名列表，插入到自定义 DOM 节点中（如<div class="file-list"></div>） - 提供“重新选择”按钮，点击后触发
fileInput.click()，覆盖旧选择 - 若表单支持多文件且允许追加，需在新选文件后与旧元数据合并，避免重复
最终提交时如何把“暂存文件”一起发给后端
不能靠表单自动收集——因为原始 File 对象已在页面刷新后丢失。必须用 FormData 手动组装，配合 fetch 或 XMLHttpRequest 提交。
操作流程：
- 从 localStorage 读取各步骤的文件元数据（如
myForm-step2-files） - 根据业务逻辑，决定是否需要用户再次确认（例如显示“以下文件将上传：xxx.pdf（2.1MB）”）
- 构建
FormData实例，对每个待上传文件，调用formData.append('files[]', fileBlob, fileName)—— 但注意：这里fileBlob必须来自用户本次重新选择（input.files），不是 localStorage 里的元数据 - 也就是说：localStorage 只起“记忆+提示”作用；真实上传仍依赖用户当次触发的
FileList
真正需要持久化文件内容的场景（如离线编辑后上传），应改用 IndexedDB 存 File 或 Blob，但开发成本高、兼容性略差，多数多步骤表单无需走到这一步。
最易被忽略的一点：很多人以为存了文件名就等于“文件还在”，结果提交时发现 input.files.length === 0 却没做兜底提示——务必在提交前校验实际 files 是否存在，否则用户会收到“未选择文件”的静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
