如何利用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' }
];

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

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文件再上传，服务器端解压，保留文件夹结构。 这需要服务器端额外处理解压逻辑。

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