Angular中如何通过目录选择器获取目录绝对路径？

优化现有webkitdirectory方案的问题 #

你当前用的<input type="file" webkitdirectory/>是浏览器支持的目录选择方式，但确实存在两个局限，这里给出针对性的处理方式：

1. 处理相对路径 #

浏览器出于安全限制不会返回本地绝对路径，但可以通过File对象的webkitRelativePath属性拼接出目录的层级结构。比如在你的onDirectorySelected方法中：

onDirectorySelected(event: Event) {
  const input = event.target as HTMLInputElement;
  const files = input.files;
  if (!files || files.length === 0) return;

  // 从第一个文件的相对路径中提取目录部分
  const fullDirectoryHierarchy = files[0].webkitRelativePath.split('/').slice(0, -1).join('/');
  console.log('选中的目录层级:', fullDirectoryHierarchy);
}

虽然这不是系统级的绝对路径，但足以满足业务逻辑中对目录层级的判断。

2. 解决空目录无返回的问题 #

webkitdirectory在选择空目录时不会触发change事件，因为没有文件被选中。这时候可以结合拖放API来处理：
在模板中添加一个可拖放区域，同时保留原有的input作为备用：

<div class="drop-area" (dragover)="handleDragOver($event)" (drop)="handleDrop($event)">
  拖拽目录到此处，或点击选择
  <input type="file" webkitdirectory hidden #dirInput (change)="onDirectorySelected($event)">
  <button (click)="dirInput.click()">选择目录</button>
</div>

然后在组件类中实现拖放逻辑：

handleDragOver(event: DragEvent) {
  event.preventDefault();
  // 可选：给拖放区域添加视觉反馈样式
  (event.target as HTMLElement).classList.add('drag-active');
}

handleDrop(event: DragEvent) {
  event.preventDefault();
  (event.target as HTMLElement).classList.remove('drag-active');

  const items = event.dataTransfer?.items;
  if (!items) return;

  for (const item of items) {
    if (item.kind === 'file') {
      const entry = item.webkitGetAsEntry();
      if (entry?.isDirectory) {
        // 无论目录是否为空，都能获取到目录条目
        this.processDirectory(entry);
      }
    }
  }
}

processDirectory(entry: FileSystemDirectoryEntry) {
  console.log('选中的目录名称:', entry.name);
  // 如果需要读取目录内容（即使为空），可以用目录阅读器
  const reader = entry.createReader();
  reader.readEntries((entries) => {
    console.log('目录内的文件/子目录:', entries);
  });
}

拖放API的FileSystemDirectoryEntry可以直接识别空目录，完美解决这个问题。

替代方案：直接使用文件保存API #

如果你的核心需求是将特定文件存储到用户选择的目录，而非单纯选择目录，那么可以跳过目录选择步骤，直接使用现代浏览器支持的showSaveFilePicker API。这个API会让用户选择文件的保存位置（包括目录），并且允许写入文件，完全符合浏览器安全规范：

async saveTargetFile(fileContent: string) {
  try {
    // 弹出保存文件选择框
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'target-file.json', // 默认文件名
      types: [
        {
          description: 'JSON Files',
          accept: {'application/json': ['.json']}
        }
      ]
    });

    // 创建可写入流并写入内容
    const writableStream = await fileHandle.createWritable();
    await writableStream.write(fileContent);
    await writableStream.close();

    alert('文件已成功保存');
  } catch (error) {
    console.error('保存失败:', error);
  }
}

这个方案不需要提前选择目录，直接让用户指定保存路径，体验更流畅，也避免了目录选择的局限。

内容的提问来源于stack exchange，提问作者Ben Dover