浏览器出于安全考虑禁止网页直接获取用户本地文件系统的绝对路径，包括通过 选择的文件夹；现代 Web API（如 File System Access API）可在用户明确授权后提供有限的路径信息（如名称），但无法返回真实磁盘路径。
浏览器出于安全考虑禁止网页直接获取用户本地文件系统的绝对路径，包括通过 `` 选择的文件夹；现代 web api（如 file system access api）可在用户明确授权后提供有限的路径信息（如名称），但无法返回真实磁盘路径。
在 Web 开发中，尤其是 Angular 17 等现代前端框架下，开发者常期望通过 让用户“选择一个文件夹”，并直接获取其本地绝对路径（例如 C:\Users\Alice\Documents\Export），以便后续将生成的文件保存到该位置。遗憾的是，这是被所有主流浏览器主动阻止的行为——且这一限制是刻意设计的安全机制，而非技术缺陷。
? 为什么无法获取真实文件夹路径？
HTML 规范（WHATWG HTML Spec）明确规定： 元素的 value 属性仅返回一个伪造的、无意义的路径字符串（如 "C:\fakepath\folder"）或仅文件名，其目的正是防止网站窥探用户本地文件系统结构。若允许暴露真实路径，攻击者可能结合其他漏洞推断用户身份、软件安装习惯甚至敏感文档位置，构成严重隐私风险。
即使使用 webkitdirectory 或 mozdirectory 属性，浏览器也只提供所选文件夹内文件的 File 对象列表（通过 event.target.files），而每个 File 对象的 webkitRelativePath 仅含相对路径（如 "project/config.json"），不包含驱动器盘符或用户主目录等真实路径片段。
✅ 可行的现代替代方案：File System Access API（推荐）
自 Chrome 86+、Edge 95+、Firefox 125+（需启用实验标志）起，W3C 标准化的 File System Access API 提供了更安全、更可控的文件系统交互能力：
// Angular 组件中（需在用户手势触发的事件中调用，如按钮点击）
async selectSaveFolder() {
try {
// 请求用户授予对某个文件夹的读写权限
const handle = await window.showDirectoryPicker();
// 获取文件夹名称（非完整路径！）
console.log('Selected folder name:', handle.name); // e.g., "Exports"
// 创建新文件并写入内容（示例：生成 report.txt）
const fileHandle = await handle.getFileHandle('report.txt', { create: true });
const writable = await fileHandle.createWritable();
await writable.write(new TextEncoder().encode('Hello from Angular!'));
await writable.close();
// ✅ 用户明确授权 + 操作在沙盒内完成，无路径泄露风险
} catch (err) {
console.error('Folder selection cancelled or denied:', err);
}
}
⚠️ 注意事项：
- 必须在用户显式交互（如
click、keydown）事件处理函数中调用，不可在异步回调或初始化时触发；- 首次调用会弹出系统级权限对话框，用户可拒绝或仅授予一次访问权；
handle.name仅返回文件夹名称，不是完整路径；但配合getFileHandle()和createWritable()，你已具备“保存文件到指定位置”的全部能力；- Safari 尚未支持该 API（截至 2024 年），需降级处理（如回退到下载 Blob 并由浏览器默认保存位置处理）。
? 其他兼容性方案
-
仅显示文件夹名（无路径）：利用
webkitRelativePath提取最上级目录名（需至少一个子文件）：onFolderSelect(event: Event) { const input = event.target as HTMLInputElement; if (input.files.length > 0) { const firstFile = input.files[0]; const folderName = firstFile.webkitRelativePath.split('/')[0]; console.log('Likely folder name:', folderName); // 不可靠，仅作参考 } }❗ 此法依赖用户实际选择了含文件的文件夹，且
webkitRelativePath在无子文件时为空，不推荐用于生产环境。 引导用户手动输入路径（不推荐）：易出错、无验证、体验差，且仍无法实现自动保存。
✅ 总结
| 方案 | 是否获取真实路径 | 安全性 | 浏览器支持 | 推荐度 |
|---|---|---|---|---|
input[type=file] + webkitdirectory
|
❌（仅伪造路径/相对路径） | ✅ | 全平台 | ⚠️ 仅适合批量读取文件，不适用“保存到指定文件夹”场景 |
| File System Access API | ❌（但可安全写入） | ✅✅✅ | Chrome/Edge/Firefox（部分） | ✅✅✅ 首选方案 |
| 手动输入路径 | ✅（字符串形式） | ⚠️（无校验） | 全平台 | ❌ 不推荐 |
最佳实践是拥抱 File System Access API：它用最小权限原则（用户每次授权一个操作）、清晰的 UX（系统级弹窗）和强大的功能（读/写/创建/删除），在安全边界内完美满足“让用户指定保存位置”的核心需求。Angular 中只需将其封装为服务方法，并妥善处理拒绝异常即可。
