webkitdirectory 必须与 multiple 同时使用才能递归获取文件，否则仅返回空或单个 file 对象；file.webkitrelativepath 是唯一路径依据，但 firefox 不支持，需前端自行解析并做兼容降级。
直接用 webkitdirectory 选目录是可行的，但只在 Chrome、Edge、Safari 16.4+ 中有效，Firefox 已完全不支持——别把它当跨浏览器方案用。
为什么加了 webkitdirectory 还是弹出文件选择框？
最常见原因是漏了 multiple。这个属性不是可选的：没有它，浏览器会把整个文件夹当作“一个条目”处理，e.target.files 可能为空、长度为 1、甚至只返回一个空 File 对象，而不是递归遍历后的所有文件。
- 必须同时写
webkitdirectory和multiple，缺一不可 -
directory属性可以加上（作为兼容写法），但它在 Chrome/Safari 中不生效，在 Firefox 中已失效，加了无害但别指望它起作用 - 不要设
accept，它对目录选择无效，某些版本 Chrome 会因此压根不弹窗 - 不要用 JS 调
input.click()触发——多数浏览器会静默拒绝，必须由用户真实点击（哪怕按钮是用 CSS 遮盖的原生input）
event.target.files 拿到的是什么？
它是一个扁平化的 FileList，里面全是 File 对象（继承自 Blob），**不含任何目录对象本身，也不保留嵌套结构**。每个 File 的 name 是纯文件名（如 index.js），而真实路径信息只藏在 file.webkitRelativePath 里（如 src/utils/helper.ts）。
-
file.webkitRelativePath是还原目录结构的唯一依据，Chrome/Safari 稳定提供，Firefox 返回空字符串 -
file.path早已被 Chromium 移除，任何尝试读取它的代码都会报undefined - 不能通过
FileList判断哪个文件属于哪个子目录——得靠解析webkitRelativePath的斜杠层级 - 后端接收时需配合该字段做路径拼接，前端无法自动创建服务端目录
怎么写 HTML 才能稳定触发文件夹选择对话框？
最简且实测可靠的写法是：
<input type="file" webkitdirectory directory multiple>
隐藏它也别用 display: none 或 visibility: hidden——这会让事件失效。推荐用：
<input type="file" id="dir-input" webkitdirectory directory multiple style="position: absolute; opacity: 0; width: 1px; height: 1px;">
- 用按钮
click()触发这个隐藏 input，移动端更稳 - 不要给 input 设
value，它是只读的，赋值无效 - 别在非用户手势上下文（比如 setTimeout、fetch 回调）里调
click()，会被拦截 - 如果需要 fallback，得单独适配 Firefox：它只认
directory（且仅限 HTTPS/localhost），但行为不一致，建议放弃
真正容易被忽略的点是：你以为选中了文件夹，其实只是拿到了一堆文件；你以为有路径，其实只有 webkitRelativePath 这一根细线连着结构；一旦换浏览器或升级，这根线就断了——所以凡是要走生产环境的目录上传，必须把路径解析、分片、重试、错误降级这些逻辑全写死在前端，不能依赖浏览器“自动给你组织好”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
