是唯一原生触发文件夹选择并获取所有子文件的方式，返回扁平化 FileList，需在 change 事件中用 JavaScript 按扩展名等手动过滤，每个 File 的 webkitRelativePath 提供相对路径（如 "docs/report.pdf"），但仅 Chromium 系列支持，Firefox 不支持。
直接用 input 的 webkitdirectory + directory 属性能选中整个文件夹，但浏览器不会帮你过滤子文件——过滤必须在 JS 层做，且要小心路径、类型、大小等维度的误判。
如何触发文件夹选择并拿到所有子文件
关键不是“上传”，而是“选中”。 是唯一可行的原生方式。注意两点：
-
webkitdirectory和directory必须同时写，否则 Safari 或新版 Chrome 可能不认 - 不能加
accept属性来限制文件夹内文件类型——它对目录选择无效，加了也白加，还可能干扰某些浏览器弹窗响应 - 选中后，
e.target.files返回的是扁平化的FileList，不含目录结构信息；每个File对象的webkitRelativePath字段可读取相对路径（如"docs/report.pdf"），但仅限 Chromium 系列，Firefox 不支持
怎么按扩展名或 MIME 类型筛选文件
过滤动作必须在 change 事件里手动做，不能依赖 HTML 属性。常见错误是只看 file.name 后缀，忽略大小写和无扩展名文件：
- 用
file.name.toLowerCase().endsWith('.pdf')比.indexOf('.pdf') !== -1更安全，避免匹配到my.pdf.bak - MIME 类型不可信：
file.type是浏览器根据扩展名或魔数推测的，可能为空或错误（比如 .csv 文件常被识别为text/plain） - 真正可靠的方式是组合判断：先按扩展名粗筛，再对关键文件用
FileReader读前几个字节校验魔数（如 PDF 开头是%PDF），但这会增加延迟，一般项目没必要
上传时如何只发筛选后的文件
构造 FormData 时，只 append 过滤后的 File 对象即可。注意别传错参数顺序：
const formData = new FormData();
filteredFiles.forEach(file => {
formData.append('files', file); // 第二个参数必须是 File 实例，不是 file.name
});
后端接收时，字段名（这里是 files）要和服务器约定一致。如果后端要求每个文件带原始路径，可以把 file.webkitRelativePath 一起 append 进去：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
formData.append('paths', file.webkitRelativePath);
但要注意：这个路径是客户端生成的，不可信，服务端必须做合法性校验（如禁止 ../、空字符、控制字符）。
容易被忽略的坑：大文件夹卡死、内存爆掉、重复提交
用户选一个含 5000 个文件的文件夹，JS 遍历 FileList 本身不卡，但如果你顺手对每个文件调用 URL.createObjectURL() 做预览，或者用 FileReader.readAsDataURL() 转 base64，页面大概率直接卡死或崩溃：
-
URL.createObjectURL()虽快，但不自动释放，必须在上传完成后显式调用URL.revokeObjectURL() -
readAsDataURL()会把整个文件转成字符串，4MB 文件 base64 后变 ~5.3MB，20 个就是 100MB+ 内存占用，GC 来不及回收 - 没做防抖的上传按钮，用户狂点两次，可能发两遍相同请求，后端得靠唯一标识（如
file.lastModified + file.size + file.name拼 MD5）去重
真实项目里，文件夹上传的瓶颈从来不在后端接口，而在前端对 FileList 的处理粒度和内存管理意识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
