Angular中如何获取文件夹内文件的绝对路径并保存为字符串

你用<input webkitdirectory>选择文件夹后，只能拿到webkitRelativePath的相对路径，这不是代码问题——浏览器出于安全限制，完全禁止网页获取本地文件/文件夹的绝对路径，目的是防止网页窃取用户本地文件系统的敏感信息。

可行的替代处理方式 #

1. 提取文件夹名称（从相对路径中） #

如果只是需要识别选中的文件夹名称，可以从webkitRelativePath中截取：

public saveFolderLocation(event: Event){
  const element = event.currentTarget as HTMLInputElement;
  const files = element.files;
  if(files?.length){
    const firstPath = Array.from(files)[0]['webkitRelativePath'];
    // 拆分相对路径，取第一个部分作为文件夹名
    const folderName = firstPath.split('/')[0];
    console.log('选中的文件夹:', folderName);
  }
}

2. 直接操作文件内容 #

如果你的核心需求是处理文件（比如读取、上传），完全不需要依赖路径，直接用选中的File对象即可：

public saveFolderLocation(event: Event){
  const element = event.currentTarget as HTMLInputElement;
  const files = element.files;
  if(files){
    Array.from(files).forEach(file => {
      // 示例：读取文件文本内容
      const reader = new FileReader();
      reader.onload = () => {
        console.log(`处理文件 ${file.name}:`, reader.result);
      };
      reader.readAsText(file);
      // 如果是上传，直接把file对象传给FormData即可
      // const formData = new FormData();
      // formData.append('files', file);
    });
  }
}

重要提醒 #

任何宣称能绕过浏览器限制获取本地绝对路径的方法，要么是针对旧版浏览器的漏洞（现在已被修复），要么是不可靠的。网页操作本地文件的标准方式就是基于File对象，不要纠结于获取绝对路径——这是浏览器安全机制的强制要求。

内容的提问来源于stack exchange，提问作者Georgi Yakov