HTML不支持多文件夹选择，需用Drag & Drop API配合DirectoryEntry递归读取并分片上传，Safari/iOS完全不支持。
HTML原生不支持批量选多个文件夹
直接加 multiple + webkitdirectory 无效——浏览器会忽略 multiple，只让你选一个文件夹。这是 HTML 规范限制，不是 bug，JS 无法绕过。
常见错误现象：用户点了输入框，选完第一个文件夹后对话框就关闭；或者控制台没报错，但 e.target.files.length 始终是 1。
-
webkitdirectory和directory都只作用于单次选择行为，不扩展 multiple 的语义 - Firefox 支持
directory，Chrome/Edge 用webkitdirectory，但两者都不允许多选 - 没有 polyfill 或属性组合能激活“多文件夹选择对话框”
必须用拖放 API（Drag & Drop）接多个文件夹
真实可行的方案是放弃 ，改用 drop 事件监听 dataTransfer.items，逐个提取 DirectoryEntry。
关键点在于：只有 Chrome/Edge（基于 Chromium）和新版 Firefox 支持 item.webkitGetAsEntry() 返回目录对象；Safari 完全不支持目录遍历，iOS 更是彻底不可用。
- 检查是否为目录：
item.kind === 'file' && item.webkitGetAsEntry().isDirectory - 递归遍历需用
dir.createReader().readEntries()，不能靠file.webkitRelativePath（它只在 input 模式下有） - 每个目录要单独调用
readEntries()，不能一次性 flatten 所有文件，否则容易栈溢出或超时 - 避免在主线程同步遍历深层嵌套结构，建议用
setTimeout或queueMicrotask分片处理
FormData 提交时怎么保持文件路径信息？
拖放拿到的每个 File 实例默认没有路径，file.name 只是纯文件名。要保留原始层级，必须手动拼接相对路径字符串，并作为额外字段传给后端。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
例如：用户拖入 /project/a/step/abc.step 和 /project/b/pdf/manual.pdf，你得从 DirectoryEntry 的 fullPath 或递归过程中的路径栈里提取 a/step/abc.step 和 b/pdf/manual.pdf，再用 formData.append('paths[]', relativePath) 一并提交。
- 不要依赖
file.webkitRelativePath：它只在下存在，拖放模式下为"" - 后端接收时，
paths[]和files[]必须严格一一对应，否则解包时会错位 - 如果文件总数超 1000 个，建议分批上传（比如每 200 个一组），避免 FormData 过大触发浏览器内存警告
兼容性与降级必须显式提示用户
这不是“稍作适配就能跑”的功能。Safari（含所有 iOS 版本）根本不暴露 webkitGetAsEntry，且无替代 API。强行隐藏拖放区或静默失败，只会让用户困惑。
检测逻辑必须前置：
- 用
navigator.userAgent判断是否为 Safari / iOS - 用
typeof (window as any).webkitRequestFileSystem === 'undefined'粗略判断是否支持 File System Access API 子集 - 不满足时，直接显示文案：“当前浏览器不支持多文件夹拖放上传，请使用 Chrome 或 Edge 浏览器”
- 别尝试模拟多次点击 input——系统级限制，连
click()都不会触发多选对话框
真正麻烦的不是代码怎么写，而是目录结构深、文件类型杂、用户网络不稳定时，递归读取 + 分片上传 + 路径映射 + 断点续传这四层逻辑叠加，任意一环出问题都难定位。先确保单文件夹拖放能稳定走通，再考虑批量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
