Angular实现文件夹选择并保存绝对路径功能求助

你当前用webkitdirectory属性的问题在于，浏览器会返回选中文件夹下的所有文件，而非文件夹本身；同时出于安全限制，浏览器不会直接提供本地文件夹的绝对路径。不过可以通过webkitRelativePath属性提取出选中文件夹的路径信息。

修正后的代码实现 #

HTML 部分

保留原有input标签即可：

<input type="file" id="filepicker" name="fileList" (change)="saveFolderLocation($event)" webkitdirectory/>

TypeScript 部分

在组件的saveFolderLocation方法中，通过文件的webkitRelativePath提取文件夹路径：

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

  // 取第一个文件的相对路径，拆分后得到选中的文件夹路径
  const firstFile = inputElement.files[0];
  const folderPathSegments = firstFile.webkitRelativePath.split('/');
  // 移除最后一段（文件名），剩下的就是文件夹的相对路径
  folderPathSegments.pop();
  const selectedFolderPath = folderPathSegments.join('/');

  // 这里的selectedFolderPath就是选中的文件夹路径（浏览器允许的范围内）
  console.log('选中的文件夹路径:', selectedFolderPath);
  // 可将该路径保存到组件变量中供后续使用
}

关键说明 #

• 浏览器无法获取本地文件系统的绝对路径，这是浏览器的安全策略，防止网页获取用户本地文件系统的敏感信息。
• webkitRelativePath返回文件相对于选中文件夹的路径，比如选中/User/Documents/Project文件夹，其中的readme.txt的webkitRelativePath为Project/readme.txt，拆分后即可得到文件夹的路径部分。

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