HTML5文件夹上传可利用webkitRelativePath还原目录树结构。该属性提供文件相对路径（如"设计图纸/总装图.dwg"），需解析斜杠分隔路径、递归构建嵌套对象或树节点，再配合details/summary实现可折叠渲染；但Firefox等浏览器不支持该属性，须降级为扁平列表展示。
用 webkitRelativePath 提取文件路径结构，不是“预览”而是“还原目录树”
浏览器不提供真正的“文件夹预览”，它只把用户选中的整个文件夹展开成一个扁平的 FileList，但每个 File 对象带有一个关键属性：webkitRelativePath。这个字符串就是该文件在原始文件夹中的相对路径（如 "src/js/main.js" 或 "assets/images/logo.png"）。你可以靠它重建层级关系，但必须自己解析、分组、渲染——没有现成的折叠树组件自动出来。
常见错误是直接遍历 files 并只显示 file.name，结果所有文件都挤在根目录下，完全丢失结构。
- 必须用
Array.from(files)转成数组，才能用map/reduce处理 -
webkitRelativePath在 Firefox 和旧版 Safari 中为空，仅 Chrome/Edge/新版 Safari 支持 - 路径分隔符统一为
/，即使用户在 Windows 上选择，浏览器也会转义 - 空文件夹不会出现在
FileList中——HTML5 不上报空目录
前端构建目录树：按斜杠分割 + 递归归类
拿到所有 File 后，需要把 webkitRelativePath 拆成路径段，逐级生成节点。最简做法是用 split('/') 得到路径数组，再用对象嵌套模拟树结构。
例如："a/b/c.txt" → ["a", "b", "c.txt"]，然后挂到 tree.a.b 下作为叶子节点；"a/readme.md" 就挂到 tree.a 下另一项。
- 不要用
eval或字符串拼接对象路径，用循环逐层访问或lodash.set类工具 - 同一路径段名可能既是文件又是文件夹（比如
"log"是文件，"log/1.txt"存在），需统一按“有子路径即为文件夹”判断 - 渲染时建议用
details/summary实现可折叠，比手写 JS 展开逻辑更轻量且语义正确
为什么不能用 FileReader 或 createObjectURL 预览整个文件夹？
这两个 API 只作用于单个 File 对象，对文件夹无意义。你无法对一个“文件夹”调用 readAsDataURL，也不能给 webkitdirectory 输入框的 files[0]（它仍是普通文件）生成有效预览 URL。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
所谓“预览”，实际是针对其中的图片、文本、PDF 等可读类型做单独处理：
- 图片：对每个
File调用URL.createObjectURL(file)，赋给src，记得上传后调用URL.revokeObjectURL() - 文本类（.txt/.json/.log）：用
FileReader.readAsText()读内容，但大文件要防卡顿，建议加onprogress或限制大小 - PDF/视频等二进制文件：只能显示图标+文件名+大小，无法在页面内渲染原始内容（除非后端转缩略图或流式解析）
兼容性 fallback 必须手动实现，没有优雅降级
当用户用 Firefox 或旧版 Edge 时，webkitRelativePath 为空，你拿不到任何路径信息。此时唯一能做的，是退化为“仅展示所有文件名 + 总计数量 + 总大小”，并提示“当前浏览器不支持文件夹结构识别”。
别指望 polyfill——这是浏览器底层 File API 的能力缺口，JS 无法绕过沙箱补全。
- 检测方式：
if (!files[0]?.webkitRelativePath)，而不是查 UA 字符串 - 不要隐藏上传控件或禁用功能，仍允许用户上传，只是结构信息不可用
- 如果业务强依赖目录结构（比如打包部署工具），应在 UI 明确标注“Chrome/Edge 推荐”，而非静默失败
实际路径解析和树构建容易被忽略的是：多个文件可能共享同一父路径但不同深度，比如 "a/b/c.txt" 和 "a/d/e.txt"，它们的公共前缀是 "a"，但中间层 "b" 和 "d" 必须独立存在。手动维护嵌套对象时，稍有疏漏就会覆盖或错挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
