webkitdirectory 是仅 chromium 和 safari 16.4+ 支持的非标准属性，需配合 multiple 使用才能触发文件夹选择并获取扁平化 filelist；file.webkitrelativepath 是还原目录结构的唯一依据，firefox 不支持该字段。
webkitdirectory 是什么，能不能直接用
webkitdirectory 是一个非标准、浏览器私有属性，仅在 Chromium 系统（Chrome、Edge）、Safari（16.4+）中有效。它不是 HTML 规范的一部分，W3C 未定义，Firefox 已移除 directory 属性支持，且不识别 webkitdirectory。所以不能当作跨浏览器方案使用，也不能写进生产环境的“默认路径”。
它的真实作用是：让 <input type="file"> 弹出「文件夹选择对话框」（而非文件选择器），用户选中一个文件夹后，浏览器会递归遍历其下所有**文件**（不含子目录对象本身），并把它们塞进 e.target.files —— 这是一个扁平化的 FileList，没有嵌套结构。
- 必须同时加
multiple，否则只返回根目录名字符串（不是File对象） - 必须显式由用户点击触发，
input.click()在多数浏览器中会被静默拒绝（安全策略） - 不要尝试读取
file.path，该字段早已被 Chromium 移除，且从未标准化
怎么写 HTML 才能触发文件夹选择
最简可用写法是：
<input type="file" webkitdirectory directory multiple>
其中 directory 是历史兼容写法（Firefox 旧版曾支持），现在已无效，但加上无害；webkitdirectory 是实际起效的属性；multiple 是强制要求，缺一则行为异常（例如只返回一个空 File 或根本不出对话框）。
- 不要加
accept，它对文件夹选择无过滤效果，反而可能干扰弹窗逻辑 - 不要设
value或用 JS 赋值，<input>的 value 是只读的，强行赋值无效 - 若需隐藏原生 input，可用 CSS
opacity: 0; position: absolute覆盖，但别用display: none或visibility: hidden，否则事件无法触发
如何从 files 中提取真实路径并上传
每个 File 对象的 webkitRelativePath 是唯一能还原目录结构的字段，格式如 "src/index.js" 或 "assets/images/logo.png"。注意：file.name 永远只是纯文件名（如 "index.js"），不含路径。
上传时必须用这个路径作为服务端重建目录的依据，不能只传文件内容。
- 遍历用
for...of，避免Array.from(files).map(...)导致大文件夹内存暴涨 - 构造
FormData时，第三个参数传file.webkitRelativePath || file.name，确保后端收到带路径的文件名 - 示例关键行：
formData.append('files', file, file.webkitRelativePath || file.name) - 不要一次性把整个
FileList塞给后端——它不是可序列化对象，后端收不到
后端接收和常见翻车点
服务端拿到的是一组同名字段（如多个 files），每个值附带原始路径信息。Node.js（Express）需靠 multer 解析；Python（Flask）得用 request.files.getlist('files')，不能用 request.form；Nginx 默认限制上传体大小，需调 client_max_body_size。
- 路径校验必须做：禁止
../、以/开头、空路径、超长路径等，否则有目录穿越风险 - Firefox 用户永远拿不到
webkitRelativePath，它的值恒为""，此时只能退化为按文件名上传（丢失结构） - 大文件夹（>1000 个文件）建议分批上传或加并发控制，避免 fetch 请求超时或内存溢出
真正麻烦的不是怎么选文件夹，而是怎么让后端安全、准确地按路径建目录并写入——前端传的 webkitRelativePath 是唯一线索，也是唯一信任边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
