webkitdirectory是唯一可行的原生文件夹上传方式，仅chromium系支持，需配合webkitrelativepath还原路径，firefox已不支持；多文件夹拖拽须用datatransfer.items+webkitgetasentry实现，但仅限chrome/edge。
webkitdirectory 属性是唯一可行的原生方式
HTML 标准不支持文件夹上传，input type="file" 默认禁用文件夹选项。只有加了 webkitdirectory（Chrome、Edge、Safari）或已废弃的 directory（Firefox 旧版）才可能触发文件夹选择对话框。它不是“上传文件夹”，而是让用户选中一个目录后，浏览器递归读取其下所有文件，生成扁平化的 FileList。
必须同时写两个属性才能兼顾 Chrome/Safari 和旧 Edge：<input type="file" webkitdirectory directory>。不能加 multiple——部分浏览器会直接忽略 webkitdirectory 或报错。
注意：webkitdirectory 是私有属性，非标准，W3C 未采纳。Firefox 自 80+ 版本起已完全移除 directory 支持，此时该 input 在 Firefox 中退化为单文件选择，且 webkitRelativePath 始终为空。
读取文件时必须依赖 webkitRelativePath 还原路径
每个 File 对象的 name 只返回纯文件名（如 logo.png），真正携带层级信息的是只读属性 webkitRelativePath（如 assets/css/main.css）。这是后端重建目录结构的唯一依据。
遍历要严格用 for...of 或传统 for 循环，避免误用 Array.from(files) 后调用 map 等方法——某些浏览器下 webkitRelativePath 在转换后丢失。
示例关键逻辑：
for (const file of e.target.files) {
const path = file.webkitRelativePath || file.name;
formData.append('files', file, path);
}
这里第三个参数 path 会作为文件名传给后端，否则服务器收到的只是原始文件名，无法区分 src/index.js 和 test/index.js。
拖拽多个文件夹需用 DataTransfer.items + webkitGetAsEntry
input 元素天生不支持多文件夹选择。想实现“拖多个文件夹进来”，必须放弃 input，改用 drop 事件监听 div 区域，并从 event.dataTransfer.items 中提取 FileSystemEntry。
核心限制很硬：
-
items中每个item必须先调用item.webkitGetAsEntry()才能判断是否为目录（isDirectory === true） - 递归遍历目录需手动实现，不能靠
files直接获取；每层都得调用createReader().readEntries() - 所有路径操作仅在 Chromium 内核有效；Firefox 不支持
webkitGetAsEntry，也无法读取目录内容
这意味着：你写的“多文件夹拖拽”功能，在 Safari 和 Firefox 上基本不可用，仅限 Chrome/Edge 用户。
后端接收时路径字段不能丢，且必须校验安全性
前端传来的 webkitRelativePath 是用户可控字符串，比如可能含 ../../etc/passwd。后端绝不能直接拼接进文件系统路径。
必须做两件事：
- 标准化路径：用语言内置函数（如 Node.js 的
path.normalize()）处理，再检查是否仍以目标上传根目录开头 - 拒绝含
..、绝对路径符（/或C:\）、控制字符的路径
另外，FormData 中每个文件都应附带一个显式 path 字段（formData.append('path', file.webkitRelativePath)），而不是只靠文件名推断——这样后端解析更明确，也方便做路径白名单校验。
容易被忽略的一点：大文件夹可能产生上千个 File 对象，一次性全塞进 FormData 并 fetch 发送，会吃光内存或触发浏览器 abort。实际项目中必须分批、加节流、或改用流式上传。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
