Angular应用导入含子文件夹的目录时仅获取文件问题求助

问题核心在于HTML5的webkitdirectory机制本身：它只会返回选中目录下的所有文件作为File对象，不会直接返回文件夹条目。但每个文件的webkitRelativePath属性包含了完整的相对路径（比如父文件夹/子文件夹/文件名.txt），我们可以通过这个路径重构出完整的目录结构。

修复方案 #

1. 构建目录树结构

通过解析文件的相对路径，把扁平的文件列表转换为包含文件夹和文件的树形结构。

2. 调整处理逻辑

修改原有的处理函数，使其能遍历目录树，同时处理文件夹和文件。

完整代码实现 #

首先添加解析文件为目录树的辅助函数：

// 定义目录节点和文件节点的类型
interface DirectoryNode {
  name: string;
  type: 'folder';
  children: (DirectoryNode | FileNode)[];
}

interface FileNode {
  name: string;
  type: 'file';
  file: File;
}

private parseFilesToTree(files: File[]): DirectoryNode {
  const root: DirectoryNode = { name: '', type: 'folder', children: [] };

  files.forEach(file => {
    const pathSegments = file.webkitRelativePath.split('/');
    let currentNode: DirectoryNode = root;

    // 遍历路径片段，创建缺失的文件夹节点
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const segment = pathSegments[i];
      let childFolder = currentNode.children.find(
        child => child.type === 'folder' && child.name === segment
      ) as DirectoryNode;

      if (!childFolder) {
        childFolder = { name: segment, type: 'folder', children: [] };
        currentNode.children.push(childFolder);
      }

      currentNode = childFolder;
    }

    // 将文件添加到对应文件夹节点下
    const fileName = pathSegments[pathSegments.length - 1];
    currentNode.children.push({
      name: fileName,
      type: 'file',
      file: file
    });
  });

  // 返回用户选中的根文件夹（根节点的第一个子节点）
  return root.children[0] as DirectoryNode;
}

然后修改handleFolderSelect函数，改用目录树进行处理：

handleFolderSelect(event: Event): void {
  const input = event.target as HTMLInputElement;
  if (!input.files || input.files.length === 0) {
    console.error('No files selected');
    return;
  }

  const files = Array.from(input.files);
  // 生成完整目录树
  const folderTree = this.parseFilesToTree(files);
  
  // 传入目录树进行处理
  this.processFolderTree(folderTree);

  input.value = ''; 
}

// 递归处理目录树的函数
private processFolderTree(node: DirectoryNode | FileNode): void {
  if (node.type === 'folder') {
    console.log('处理文件夹:', node.name);
    // 递归处理子文件夹和文件
    node.children.forEach(child => this.processFolderTree(child));
  } else {
    console.log('处理文件:', node.name, node.file);
    // 这里编写你的文件业务处理逻辑
  }
}

关键说明 #

• webkitRelativePath是主流浏览器支持的非标准属性，用于标记文件在选中目录中的相对位置
• 辅助函数通过拆分路径片段，逐个创建文件夹节点，完整还原目录层级
• 递归遍历目录树的方式，能同时处理文件夹和嵌套的子文件夹

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