webkitdirectory在Safari中无效是因为Apple主动拒绝该API，出于隐私与沙箱安全考虑，不允网页访问本地目录结构；其仅Chromium系浏览器支持，Firefox用directory属性，Safari和IE均不支持。
webkitdirectory 和 directory 是目前唯一能触发浏览器原生文件夹选择的属性，但它们不是“全平台可用”的功能——Chrome/Edge 用 webkitdirectory，Firefox 用 directory，Safari 和 IE 完全不支持。这意味着你无法靠单个 HTML 属性实现跨浏览器文件夹上传。
为什么 webkitdirectory 在 Safari 中无效？
Safari（包括 iOS/macOS 最新版）明确不支持 webkitdirectory，也不支持 directory。用户点击后只会弹出普通文件选择框，且 e.target.files 里不会包含任何子目录路径信息。这不是兼容性 bug，而是 Apple 主动拒绝该 API 的设计决策——出于隐私与沙箱安全考虑，Safari 不允许网页访问任意本地目录结构。
常见误判现象：e.target.files.length === 0 或所有 file.webkitRelativePath 为空字符串，大概率是运行在 Safari 或旧版 Edge 上。
- 检测方式：可先判断
'webkitdirectory' in document.createElement('input')，但 Safari 返回true（属性存在）却不生效，所以更可靠的是选完后检查是否有非空webkitRelativePath - 替代方案：若必须支持 Safari，只能退回到“多文件手动选择 + 用户自行整理压缩包”，再用 JS 解压（如
JSZip），但无法还原原始目录层级
webkitRelativePath 的路径格式和兼容性陷阱
Chrome/Edge 下，每个 File 对象会带一个 webkitRelativePath 字符串，表示它在所选文件夹中的相对路径（如 "src/index.js" 或 "assets/logo.png"）。但这个字段是 WebKit 独有、非标准的，Firefox 虽支持 directory，却返回空字符串或 undefined ——它不提供路径信息。
关键限制点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- macOS 系统可能生成
__MACOSX/隐藏目录，其下文件的webkitRelativePath也会被包含，需主动过滤（如pathSegments.some(seg => seg.startsWith('__MACOSX') || seg.startsWith('.'))） - Windows 路径分隔符是
\，但webkitRelativePath统一使用/，无需转义处理 - 路径开头不含
/，结尾不含/，且不反映盘符或绝对路径，仅用于重建层级
服务端如何识别并还原文件夹结构？
前端传过来的只是扁平化的 File 列表，每个文件仍以独立 multipart/form-data 字段提交（如 formdata.append('file', file)）。服务端无法自动感知“这是某个子目录下的文件”——必须靠前端把 webkitRelativePath 作为额外字段附带上传，例如：
formdata.append('file', file);
formdata.append('path', file.webkitRelativePath); // 手动附加
否则后端拿到的只是一堆同名文件（比如多个 index.html），根本无法区分归属。主流 Node.js 框架（Express + busboy）、Spring Boot（MultipartFile）都需自行解析该字段并按路径创建目录、写入文件。
容易被忽略的一点：如果用户选中的是空文件夹，e.target.files 长度为 0 —— 浏览器不会上报任何内容，连根目录本身都不会出现。这意味着你无法通过上传行为确认“用户确实选了一个空文件夹”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
