webkitdirectory是当前唯一支持文件夹选择的原生方案，但仅限Chrome、Edge及新版Safari（≥16.4），Firefox需用directory属性且行为不同，IE完全不支持；关键依赖webkitRelativePath还原目录结构，Firefox用非标准relativePath或文件名拼接；上传时需用第三个参数传递路径，后端须校验路径合法性防越界。
webkitdirectory 是当前唯一能在主流浏览器中直接选择整个文件夹的原生方案，但仅限 Chrome、Edge、新版 Safari（≥16.4），Firefox 需用 directory 属性且行为略有差异，IE 完全不支持——别指望“一次写完跑全平台”。
为什么 webkitdirectory 不能只写 input 就完事
浏览器选中文件夹后，e.target.files 确实会返回所有子文件，但关键信息藏在每个 File 对象的 webkitRelativePath 属性里。这个路径是相对于所选文件夹根目录的完整层级路径（如 "docs/spec.pdf" 或 "src/components/Button.js"），没有它就无法还原目录结构。
- Firefox 不支持
webkitRelativePath，它用relativePath（非标准，且部分版本返回空）；稳妥做法是优先检测webkitRelativePath，fallback 到文件名拼接（仅适用于单层） -
directory属性在 Firefox 中必须和multiple一起用，否则只触发单文件选择 - macOS 用户可能遇到
__MACOSX/或.DS_Store文件混入列表，需在遍历时过滤
前端如何提取并组织文件树结构
拿到 FileList 后，不能直接丢给 FormData 发送——那样会丢失路径信息。必须手动构建带路径标识的上传逻辑：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对每个
file，用file.webkitRelativePath || file.name提取路径字符串 - 用
split('/')拆解路径段，逐级构建嵌套对象或扁平化数组（推荐后者，便于后端解析） - 若需预览，可按路径段生成缩进 DOM 节点，例如：index.html
- 大文件夹（>200 个文件）建议加节流：用
requestIdleCallback分批处理，避免卡死 UI
后端接收时怎么还原原始路径
前端不能把整个文件夹 zip 后上传（用户无感知且增加体积），而是应将每个文件作为独立字段提交，同时附带路径元数据：
- 方案一（推荐）：每个
File用formData.append('files', file, file.webkitRelativePath)—— 第三个参数会作为服务端接收到的文件名，Spring Boot 的@RequestParam MultipartFile[] files可直接拿到带路径的文件名 - 方案二：额外传一个 JSON 字段
formData.append('metadata', JSON.stringify(fileList))，后端解析后按路径创建子目录再保存 - 注意：Nginx 默认限制单次请求体大小（
client_max_body_size 1m），上传大文件夹前务必调高该值，否则直接 413
真正容易被忽略的是路径合法性校验：用户可能手动修改 webkitRelativePath 构造恶意路径（如 "../../../etc/passwd"），后端必须做白名单检查（只允许字母、数字、/、-、_、.）并拒绝含 .. 或开头为 / 的路径——这不是前端能拦住的，必须由后端兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
