浏览器原生不支持文件夹断点续传，需JS手动实现：用webkitdirectory读取文件夹（取webkitRelativePath还原结构），对每个文件计算唯一ID并分片上传，配合服务端预上传、分片上传、合并三接口及本地状态持久化。
浏览器原生不支持文件夹断点续传上传
HTML 标准的 可以选中整个文件夹，但只提供一次性读取所有文件的路径和 Blob，不带分块、校验、状态恢复能力。断点续传必须由 JS 手动实现：拆分文件 → 计算哈希 → 分片上传 → 服务端合并 → 客户端记录进度。浏览器本身不会帮你存“传到第几片了”。
webkitdirectory 怎么正确读取文件夹并提取完整路径
Chrome/Edge 支持 webkitdirectory，但返回的 File 对象没有真实绝对路径（出于安全限制），只有相对路径（如 "photos/cat.jpg"）。需用 webkitRelativePath 属性获取层级关系，否则上传后无法还原目录结构。
- 必须监听
change事件，遍历e.target.files（不是e.target.files[0]） - 每个
File的webkitRelativePath是关键字段，比如folder/sub/a.txt - Firefox 不支持
webkitdirectory，需降级为多文件选择 + 用户手动建文件夹模拟 - 不要尝试用
File.path或File.fullPath—— 这些在现代浏览器里是undefined
怎么对文件夹内每个文件做断点续传
断点续传本质是对单个文件分片上传，文件夹只是批量处理多个独立文件。核心是：为每个 File 计算唯一标识（推荐 file.name + file.lastModified + file.size 拼接后 SHA-256），再基于该 ID 管理其分片上传状态。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
File.slice(start, end)切分（注意：不是ArrayBuffer.slice） - 每片请求带上参数：
filename（含webkitRelativePath）、fileId（哈希）、chunkIndex、totalChunks、chunkHash（可选，用于服务端校验） - 客户端用
localStorage或 IndexedDB 存每个fileId的已传chunkIndex集合，页面刷新后可跳过已传分片 - 避免把整个文件夹当一个大文件切 —— 文件夹无二进制内容，只能逐个文件处理
服务端需要配合哪些关键逻辑
前端断点续传没服务端配合就是摆设。服务端至少要提供三个接口：预上传（返回已有分片列表）、上传分片、合并完成。且必须按 fileId 隔离存储临时分片，不能混在一起。
- 预上传接口（
POST /upload/preflight）接收fileId，返回已收到的chunkIndex数组，前端据此跳过重传 - 分片上传接口（
POST /upload/chunk）需校验fileId + chunkIndex是否重复，防止乱序或重放 - 合并接口（
POST /upload/merge）收到全部分片后，按chunkIndex排序拼接，并根据webkitRelativePath创建对应子目录（如fs.mkdirSync(path.dirname(fullPath), { recursive: true })） - 别忘了清理超时未完成的分片（例如 24 小时未合并就删临时文件）
实际跑通的关键在于：前端每传一个分片都要等服务端明确返回 “已收讫”，再更新本地状态；而服务端必须用原子操作维护每个 fileId 的分片完成表——漏掉一次确认或并发写入冲突，就会导致续传失败或文件损坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
