webkitdirectory 选文件夹返回扁平 FileList，需用 webkitRelativePath 去重分组；drop 时前端校验路径是否已存在；上传时 FormData.append 第三个参数必须传路径以保留目录语义。
用 webkitdirectory 选文件夹，但别指望它返回目录结构
浏览器原生支持文件夹上传，靠的是 input 的 webkitdirectory（Chrome/Safari）或 directory（Firefox）属性。它确实能递归读取整个文件夹里的所有文件，但返回的 FileList 是扁平的——没有嵌套、没有 isDirectory 标志，只有一堆 File 对象，每个带一个 webkitRelativePath 字符串（如 "assets/logo.png"）。你得靠这个路径做去重和分组。
常见错误是直接用 file.name 判断是否同名：同一文件夹里 report.pdf 和 sub/report.pdf 会被当成重复。正确做法是比对完整路径：file.webkitRelativePath，再统一 .trim().toLowerCase() 防空格和大小写干扰。
注意 Safari iOS 16.4 以下不支持该属性，需降级为单文件多选 + 手动提示“请压缩后上传”。
drop 事件里检测覆盖，前端必须自己查已上传列表
浏览器不会在 drop 时告诉你“这个 webkitRelativePath 是否已存在”。你得维护一个已上传文件路径的集合（比如 new Set(fileList.map(f => f.webkitRelativePath.toLowerCase().trim()))），在 drop 回调里遍历新拖入的每个 File，逐个检查是否命中。
- 别只比
file.name，那是错的；必须用file.webkitRelativePath - 服务端也得校验，但前端拦截能立刻反馈，避免上传一半才发现冲突
- 不要用
alert()弹确认——它阻塞拖放流程，移动端 Safari 直接忽略；改用轻量浮层或，绑定在 drop 区域内防定位偏移 - 用户点「替换」才进上传队列，点「跳过」就过滤掉该
File，不 append 到FormData
上传中保留旧节点，失败可还原
覆盖不是原子操作：先删旧记录、再存新文件、最后刷新 DOM。网络延迟或服务端失败会导致旧文件丢失、新文件未生效。所以不能一上来就 remove() 旧 DOM 节点。
推荐做法是：上传开始前，把旧附件容器设为 display: none，同时插入新预览节点；上传成功响应后，再真正移除旧节点，并调用 URL.revokeObjectURL(oldDataUrl) 清理内存。旧节点上必须存两个关键信息：data-server-id（用于服务端删除）和 data-object-url（用于还原预览）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
上传过程中用 aria-busy="true" 标记按钮或区域，禁用重复触发；若后端支持 ETag，可传 X-If-Match: 做条件更新，避免并发覆盖。
FormData.append() 时 name 值要带路径，否则后端无法区分同名文件
如果上传 assets/config.json 和 docs/config.json，光用 formData.append('file', file) 会让后端收到两个同名字段，解析混乱。必须把路径信息带上：
formData.append('file', file, file.webkitRelativePath);
这样服务端收到的文件名就是完整路径，PHP 的 $_FILES['file']['name'] 或 Node.js multer 的 file.originalname 就是 "assets/config.json"，能准确映射到存储位置。漏掉第三个参数，等于放弃路径语义，后续所有覆盖逻辑都建立在沙上。
另外，多个文件上传时，每个 File 的 webkitRelativePath 可能为空（根目录文件），此时要 fallback 到 file.name，但依然要 trim + toLowerCase 统一处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
