登录
首页 >  文章 >  前端

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

时间:2025-03-24 20:35:00 229浏览 收藏

来到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学习网公众号吧!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>