webkitdirectory 是唯一可行的原生方案，因 HTML5 规范未定义文件夹上传标准，该属性为 WebKit/Blink 私有扩展，可递归读取目录并提供 webkitRelativePath 以还原服务端层级结构。
HTML 原生支持文件夹上传并保留层级，但仅限 Chromium 内核浏览器（Chrome、Edge、新版 Opera），且必须用 webkitdirectory 属性 —— 其他浏览器（Firefox、Safari）不支持该行为，也没有等效替代 API。
为什么 webkitdirectory 是唯一可行的原生方案
HTML5 规范本身未定义文件夹上传标准，webkitdirectory 是 WebKit/Blink 引擎的私有扩展。它让 能递归读取整个目录树，每个 File 对象的 webkitRelativePath 属性会携带完整相对路径（如 "docs/spec/v1.2.pdf"），这是还原服务端目录结构的唯一可靠依据。
常见误区：
- 误以为
directory属性（无前缀）能跨浏览器工作 —— 实际上只有 Chrome/Edge 识别webkitdirectory，directory单独使用无效 - 试图用
webkitRelativePath在 Firefox 中取路径 —— 该属性在 Firefox 中为""或undefined，不可靠 - 依赖
files[0].path或类似字段 —— 浏览器出于安全限制，从不暴露本地绝对路径
前端必须做的三件事：过滤、校验、构造路径
拿到 event.target.files 后不能直接发给后端，需预处理：
- 遍历所有
File对象，跳过无webkitRelativePath的项（说明不是文件夹拖入，而是单个文件） - 检查
file.webkitRelativePath是否以/开头 —— 若是，说明某些旧版 Chrome 可能返回绝对路径片段，需截断 - 用
file.webkitRelativePath拼出服务端目标路径，例如：uploadRoot + "/" + file.webkitRelativePath；注意避免路径穿越（如"../etc/passwd"）—— 后端仍需做白名单或规范化校验 - 若需支持大文件（>500MB），建议配合分块上传逻辑，此时每块的
webkitRelativePath必须一致，否则服务端无法合并
后端如何根据 webkitRelativePath 还原目录结构
关键点在于：服务端不能只存文件名，必须解析并创建对应子目录。以 Node.js + multer 为例：
const path = require('path');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
// 从 file.originalname 无法还原路径 → 必须从前端额外传参或 form data 字段里取
// 正确做法：前端在上传时，对每个 File 构造一个同名 hidden input，值为 webkitRelativePath
const relPath = req.body['relPath_' + file.fieldname] || '';
const uploadDir = path.join('/var/uploads', relPath.replace(/[^a-zA-Z0-9/._-]/g, ''));
cb(null, uploadDir);
},
filename: (req, file, cb) => cb(null, file.originalname)
});
注意：
-
multer默认不解析多文件各自的元数据，webkitRelativePath只存在于前端 JS 的File对象中，不会自动进 form data —— 必须由前端显式提交（例如用FormData.append("relPath_file1", file.webkitRelativePath)） - Linux/macOS 下创建深层目录需确保进程有父目录写权限，建议用
fs.mkdirSync(uploadDir, { recursive: true }) - Windows 路径分隔符
\需提前转为/，否则path.join可能出错
Firefox/Safari 用户怎么办？没有真正“兼容”的纯前端解法
这不是代码写得不够好，而是浏览器能力缺失。目前真实可行的折中方案只有两个：
- 明确提示用户：“请使用 Chrome 或 Edge 浏览器上传文件夹”，并在
input渲染前检测：if (!('webkitdirectory' in document.createElement('input')))，然后禁用或隐藏该控件 - 引入桌面客户端桥接（如 Electron 封装的上传工具），或使用 Java/ActiveX 插件（仅限 IE 旧内网环境，已淘汰）
所谓“用 ZIP 打包再上传”不是等价替代 —— 它破坏了原生目录结构语义，服务端需额外解压、校验、清理临时包，且无法支持断点续传和实时进度反馈。真正的层级保留，绕不开 webkitdirectory 和 webkitRelativePath 的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
