如何将扁平化文件上传列表重建成具有文件夹层级结构的树形结构？-js教程-PHP中文网

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

聖光之護

发布： 2025-03-05 09:36:02

原创

719人浏览过

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

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

前端文件上传，特别是上传整个文件夹时，浏览器提供的 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 列表重建文件夹结构较为复杂。以下几种替代方案更实用：

服务器端重建：修改文件名 在上传前，修改每个文件的文件名使其包含完整路径信息（例如，test/前端文件.pdf）。服务器端根据文件名即可重建文件夹结构。这种方法简化了前端工作，将逻辑转移到服务器端处理。
服务器端重建：ZIP压缩包 将文件夹压缩成 ZIP 文件后再上传。服务器端解压 ZIP 文件即可获得完整的文件夹结构。此方法虽然增加了服务器端处理负担，但前端实现简单，易于维护。
约定数组格式：前端预处理 设计一种包含文件路径和类型信息的约定数组格式，在前端构造好此数组，再传递给服务器端解析。这种方法需要定义清晰的协议，但能更好地控制数据结构。

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

以上就是如何将扁平化文件上传列表重建成具有文件夹层级结构的树形结构？的详细内容，更多请关注php中文网其它相关文章！