如何利用webkitRelativePath属性还原扁平文件列表为带有文件夹层级结构的树形结构？-js教程-PHP中文网

如何利用webkitRelativePath属性还原扁平文件列表为带有文件夹层级结构的树形结构？

聖光之護

发布： 2025-03-07 09:40:14

原创

284人浏览过

如何利用webkitrelativepath属性还原扁平文件列表为带有文件夹层级结构的树形结构？

从扁平文件列表重建文件夹结构

前端文件上传，特别是文件夹上传，通常只返回文件名和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' }
];

登录后复制

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

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

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数组，根据webkitRelativePath构建树形结构。通过分割路径字符串，确定文件所属文件夹，逐步构建树形结构。这需要仔细处理路径解析，确保层级关系正确。

另一种方法是将文件夹压缩成zip文件再上传，服务器端解压，保留文件夹结构。这需要服务器端额外处理解压逻辑。

此外，还可以考虑前端约定数据结构，例如在上传数据中直接包含文件夹信息，由后端解析。这需要前后端约定好数据格式，但简化前端处理。

以上就是如何利用webkitRelativePath属性还原扁平文件列表为带有文件夹层级结构的树形结构？的详细内容，更多请关注php中文网其它相关文章！