如何将前端上传文件的扁平列表转换为带文件夹层级结构的树形结构？-js教程-PHP中文网

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

碧海醫心

发布： 2025-03-09 08:48:12

原创

331人浏览过

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

将扁平化的前端文件上传列表转换为带有文件夹层级结构的树形结构，是处理多文件上传时一个常见的问题。浏览器提供的 webkitRelativePath 属性虽然包含路径信息，但需要我们进行解析和转换。本文将详细说明如何将扁平列表转换为树形结构。

假设我们拥有一个包含 webkitRelativePath 属性的文件列表：

const files = [
  { file: { webkitRelativePath: '' }, name: '测试文件.text' },
  { file: { webkitRelativePath: 'test/前端文件.pdf' }, name: '前端文件.pdf' },
  { file: { webkitRelativePath: 'test/x/第一次上传.mp4' }, name: '第一次上传.mp4' },
  { file: { webkitRelativePath: 'test/x/第二次上传.mp4' }, name: '第二次上传.mp4' }
];

登录后复制

目标是将其转换为如下树形结构：

const directory = [
  { file: { webkitRelativePath: '' }, type: 'FILE', name: '测试文件.text' },
  {
    type: 'DIR',
    name: 'test',
    children: [
      { file: { webkitRelativePath: 'test/前端文件.pdf' }, type: 'FILE', name: '前端文件.pdf' },
      {
        type: 'DIR',
        name: 'x',
        children: [
          { file: { webkitRelativePath: 'test/x/第一次上传.mp4' }, type: 'FILE', name: '第一次上传.mp4' },
          { file: { webkitRelativePath: 'test/x/第二次上传.mp4' }, type: 'FILE', name: '第二次上传.mp4' }
        ]
      }
    ]
  }
];

登录后复制

实现方法：

立即学习“前端免费学习笔记（深入）”；

我们可以通过递归函数，根据 webkitRelativePath 属性中的路径信息构建树形结构。首先，我们需要将文件列表按照路径进行分组。然后，递归地遍历分组后的数据，构建树形结构。以下是一种可行的思路，具体的代码实现需要根据实际情况调整：

路径分割: 将每个文件的 webkitRelativePath 属性按照 / 分割成路径片段数组。
构建树形结构: 使用递归函数，根据路径片段数组构建树形结构。函数的参数包括当前路径片段数组和当前节点。如果路径片段数组为空，则表示到达文件节点，创建文件节点并返回。否则，取出第一个路径片段作为文件夹名称，查找是否存在该文件夹节点。如果不存在，则创建该文件夹节点；如果存在，则递归调用函数处理剩余路径片段。
添加文件节点: 当路径片段数组为空时，将文件信息添加到当前节点的 children 属性中。
返回树形结构: 递归函数最终返回构建好的树形结构。

这种方法避免了直接操作原数组的复杂性，提高了代码的可读性和可维护性。需要注意的是，这只是一个思路，实际实现中可能需要处理一些边缘情况，例如空路径、重复路径等。此外，还可以考虑使用第三方库来简化树形结构的构建过程。

以上就是如何将前端上传文件的扁平列表转换为带文件夹层级结构的树形结构？的详细内容，更多请关注php中文网其它相关文章！