webkitdirectory仅前端读取文件夹并提供webkitRelativePath，不支持删除、不跨浏览器；生产需四步：读取→上传（FormData带路径）→服务端按路径重建目录→前端删DOM/内存。
webkitdirectory属性不能直接实现“上传文件夹并删除”的完整流程——它只负责前端读取，不提供删除能力，也不跨浏览器生效。真正在生产环境跑通，得拆成“读取→上传→服务端结构还原→前端触发删除”四步走，缺一不可。
为什么 input[type="file"][webkitdirectory] 上传后目录结构会丢
浏览器只把每个 File 对象的 webkitRelativePath 当作路径提示，不是真实目录对象。后端收不到“这是一个文件夹”的元信息，只收到一堆带路径字符串的文件流。
常见错误是后端直接用 file.name 存文件，结果所有文件都挤在根目录，层级全平了。
必须提取每个 File 的 webkitRelativePath（如 "src/js/main.js"），再按斜杠拆解、逐级创建目录，最后写入对应路径。
Firefox 下 webkitRelativePath 恒为空，所以不能只依赖这个字段；若需兼容，得 fallback 到用户手动输入前缀或服务端约定根路径。
FormData.append() 传文件夹时容易漏掉路径参数
上传单个文件时，formData.append('file', file) 就够了；但传文件夹必须显式带上路径，否则后端无法重建结构：
– 错误写法：formData.append('files', file)（丢失路径）
– 正确写法：formData.append('files', file, file.webkitRelativePath || file.name)
注意：第二个参数是 file，第三个才是重命名后的文件名（即路径+文件名），浏览器会按这个名称存到 FormData 中
多个文件要循环 append，不能一次性传 files 数组——FormData 不识别数组，只会转成 [object File]
大文件夹（如含 1 万个文件）别一次性遍历完再发请求，容易卡死 UI；建议分批（比如每 50 个一组）或加节流控制
前端删除操作本质是删 DOM 节点 + 清内存引用
HTML5 里没有“删除已选文件”的 API，input 元素的 files 是只读 FileList，无法 splice 或 clear。
所谓“删除”，其实是：
– 把选中的 File 映射为前端状态（如 Vue 的 ref([]) 或普通数组）
– 点删除按钮时，从该数组中 filter 掉对应项
– 同时调用 URL.revokeObjectURL() 清掉预览用的 blob URL，防内存泄漏
– 如果用了 webkitdirectory，删除某个子路径文件（如 "docs/report.pdf"）不会影响同目录其他文件，因为它们是独立 File 对象
– 切记：这一步完全不涉及服务器，只是前端视图和内存清理；真删服务器文件得另发 DELETE 请求，带路径参数
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
服务端接收文件夹时最常踩的三个坑
– 权限校验缺失：用户传 ../../etc/passwd 这种路径，后端没做 path.normalize() + 白名单校验，直接拼接写入，就可能越权覆写系统文件
– 路径遍历没截断：fs.mkdirSync(dirPath, { recursive: true }) 在 Node.js 中虽支持递归建目录，但若 dirPath 含 ../，仍可能跳出目标根目录；必须先 path.resolve(uploadRoot, dirPath) 再判断是否在 uploadRoot 下
– 并发写冲突：多个文件写同一目录时，mkdir 可能报 ENOENT（目录不存在）或 EEXIST（已存在），需用 fs.promises.access() 预检 + 重试，或统一先建好所有父目录再并发写文件
真正难的不是“怎么让浏览器选文件夹”，而是服务端怎么安全、稳定地把上千个带嵌套路径的文件，不丢不乱、不越权、不崩内存地落地。很多项目卡在第二步——以为前端传了 webkitRelativePath，后端就能自动还原结构，结果上线后发现所有文件都堆在根目录，或者某次上传突然把 /var/log 给覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
