Angular 17中如何获取用户选择的文件夹路径且无需上传内部文件

要解决这个问题，推荐使用File System Access API中的showDirectoryPicker()方法，它可以直接请求用户选择文件夹，且不会遍历或读取文件夹内的任何文件，完美匹配你的需求。

核心实现方案 #

这个API是现代浏览器提供的原生能力，支持直接获取文件夹句柄；出于安全限制，浏览器不会暴露本地完整绝对路径，但可以展示文件夹名称给用户，后续也能直接通过句柄在该文件夹下创建/写入文件。

Angular 17组件代码示例 #

模板（save-path-selector.component.html）

<button (click)="selectSaveDirectory()">选择保存文件夹</button>
<p *ngIf="selectedDirectory">已选择文件夹: {{ selectedDirectory }}</p>

组件类（save-path-selector.component.ts）

import { Component } from '@angular/core';

@Component({
  selector: 'app-save-path-selector',
  templateUrl: './save-path-selector.component.html',
  standalone: true
})
export class SavePathSelectorComponent {
  selectedDirectory?: string;

  async selectSaveDirectory() {
    try {
      // 请求用户授权并选择文件夹
      const directoryHandle = await window.showDirectoryPicker();
      // 提取文件夹名称展示给用户
      this.selectedDirectory = directoryHandle.name;

      // 后续如果要生成文件并保存到该文件夹，可直接使用句柄操作
      // 示例：创建并写入文件
      // const fileHandle = await directoryHandle.getFileHandle('generated-output.txt', { create: true });
      // const writable = await fileHandle.createWritable();
      // await writable.write('你的文件内容');
      // await writable.close();
    } catch (err) {
      const error = err as Error;
      if (error.name === 'AbortError') {
        console.log('用户取消了文件夹选择');
      } else {
        console.error('文件夹选择失败:', error);
      }
    }
  }
}

浏览器兼容性 #

• 支持Chrome、Edge、Firefox 111+
• Safari目前暂不支持该API

兼容Safari的降级方案 #

如果需要兼容不支持showDirectoryPicker的浏览器，可以使用webkitdirectory属性，但优化逻辑只取第一个文件的路径来截取文件夹名称，避免过度读取文件：

模板

<input 
  type="file" 
  webkitdirectory 
  (change)="onDirectorySelected($event)" 
  style="display: none;" 
  #folderInput
>
<button (click)="folderInput.click()">选择保存文件夹</button>
<p *ngIf="selectedDirectory">已选择文件夹: {{ selectedDirectory }}</p>

组件类

onDirectorySelected(event: Event) {
  const input = event.target as HTMLInputElement;
  if (input.files?.length) {
    // 从第一个文件的相对路径中截取文件夹名称
    const firstFilePath = input.files[0].webkitRelativePath;
    this.selectedDirectory = firstFilePath.split('/')[0];
    // 清空输入框，确保重复选择同一文件夹能触发change事件
    input.value = '';
  }
}

注意：这个降级方案仍会读取文件夹内的文件列表（但不会读取文件内容），如果文件夹内文件数量极大，可能会有性能问题，因此优先推荐使用showDirectoryPicker方案。

内容的提问来源于stack exchange，提问作者Dri Morais