标签导航：

如何根据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' }
        ]
      }
    ]
  }
];

直接利用webkitRelativePath重建文件夹结构较为复杂。 更有效的方法包括：

  • Zip压缩包: 将文件打包成zip压缩包上传，保留原始文件夹结构，但服务端需要解压。
  • 自定义数据结构: 前端将文件信息整理成包含层级关系的数组，直接传递给后端。
  • 全路径文件名: 修改文件名包含完整路径信息，前后端约定好数据格式。

所有这些方法都需要前后端约定好数据格式，确保数据能够被正确处理和解析。 选择哪种方法取决于项目需求和复杂度。