如何将前端上传文件的扁平列表转换为带文件夹层级结构的树形结构？

将前端上传文件的扁平列表转换为带文件夹层级结构的树形结构，通常需要根据文件的路径信息来构建树形结构。以下是一个常见的实现思路和示例代码：

1. 数据结构

假设前端上传的文件列表是一个扁平数组，每个文件对象包含 path 属性，表示文件的路径。例如：

const files = [
  { path: 'folder1/file1.txt' },
  { path: 'folder1/file2.txt' },
  { path: 'folder2/subfolder/file3.txt' },
  { path: 'file4.txt' }
];

2. 构建树形结构

我们可以通过递归或迭代的方式，根据路径信息构建树形结构。以下是一个使用递归的示例：

function buildTree(files) {
  const tree = [];

  for (const file of files) {
    const pathParts = file.path.split('/');
    let currentLevel = tree;

    for (let i = 0; i < pathParts.length; i++) {
      const part = pathParts[i];

      // 查找当前层级是否已经存在该文件夹或文件
      let found = currentLevel.find(item => item.name === part);

      if (!found) {
        // 如果不存在，则创建新的节点
        found = { name: part, children: [] };
        currentLevel.push(found);
      }

      // 如果是最后一个部分，则表示是文件，不需要 children
      if (i === pathParts.length - 1) {
        delete found.children;
      }

      // 进入下一层级
      currentLevel = found.children;
    }
  }

  return tree;
}

const files = [
  { path: 'folder1/file1.txt' },
  { path: 'folder1/file2.txt' },
  { path: 'folder2/subfolder/file3.txt' },
  { path: 'file4.txt' }
];

const tree = buildTree(files);
console.log(JSON.stringify(tree, null, 2));

3. 输出结果

运行上述代码后，tree 将会是一个树形结构，如下所示：

[
  {
    "name": "folder1",
    "children": [
      {
        "name": "file1.txt"
      },
      {
        "name": "file2.txt"
      }
    ]
  },
  {
    "name": "folder2",
    "children": [
      {
        "name": "subfolder",
        "children": [
          {
            "name": "file3.txt"
          }
        ]
      }
    ]
  },
  {
    "name": "file4.txt"
  }
]

4. 解释

• pathParts: 将文件路径按 / 分割成数组，表示路径的各个部分。
• currentLevel: 当前层级的节点数组，初始为根节点数组 tree。
• found: 查找当前层级是否已经存在该文件夹或文件，如果不存在则创建新的节点。
• delete found.children: 如果是文件（路径的最后一部分），则删除 children 属性，因为文件没有子节点。

5. 优化与扩展

• 性能优化: 如果文件列表非常大，可以考虑使用更高效的数据结构（如 Map）来存储和查找节点。
• 扩展功能: 可以根据需要扩展节点的属性，例如添加文件大小、修改时间等信息。

通过这种方式，你可以将扁平的文件列表转换为带文件夹层级结构的树形结构，便于在前端展示或进一步处理。