如何将扁平化文件上传列表重建成具有文件夹层级结构的树形结构？

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《如何将扁平化文件上传列表重建成具有文件夹层级结构的树形结构？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

前端文件上传列表重建文件夹结构的有效方法

前端文件上传，特别是上传整个文件夹时，浏览器提供的 files 列表通常只包含文件的相对路径（例如，通过 webkitRelativePath 属性），缺乏文件夹的层级结构信息。本文探讨如何高效地将扁平化的 files 列表转换成具有文件夹层级结构的树形结构。

问题：如何从扁平化文件列表重建文件夹结构？

例如，我们获取到以下 files 列表：

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', subdirectory: [
      { file: { webkitRelativePath: 'test/前端文件.pdf' }, Type: 'FILE', name: '前端文件.pdf' },
      { Type: 'DIR', name: 'x', subdirectory: [
          { file: { webkitRelativePath: 'test/x/第一次上传.mp4' }, Type: 'FILE', name: '第一次上传.mp4' },
          { file: { webkitRelativePath: 'test/x/第二次上传.mp4' }, Type: 'FILE', name: '第二次上传.mp4' }
        ]
      }
    ]
  }
];

解决方案：避免客户端复杂重建，采用更有效的方法

直接在客户端操作 files 列表重建文件夹结构较为复杂。以下几种替代方案更实用：

1. 服务器端重建：修改文件名 在上传前，修改每个文件的文件名使其包含完整路径信息（例如，test/前端文件.pdf）。服务器端根据文件名即可重建文件夹结构。这种方法简化了前端工作，将逻辑转移到服务器端处理。

2. 服务器端重建：ZIP压缩包 将文件夹压缩成 ZIP 文件后再上传。服务器端解压 ZIP 文件即可获得完整的文件夹结构。此方法虽然增加了服务器端处理负担，但前端实现简单，易于维护。

3. 约定数组格式：前端预处理 设计一种包含文件路径和类型信息的约定数组格式，在前端构造好此数组，再传递给服务器端解析。这种方法需要定义清晰的协议，但能更好地控制数据结构。

选择哪种方法取决于具体应用场景和服务器端处理能力。 直接在客户端重建目录结构的方法复杂度高，维护成本大，上述替代方案更推荐。

理论要掌握，实操不能落！以上关于《如何将扁平化文件上传列表重建成具有文件夹层级结构的树形结构？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！