如何根据webkitRelativePath属性还原上传文件的文件夹层级结构？-js教程-PHP中文网

如何根据webkitRelativePath属性还原上传文件的文件夹层级结构？

花韻仙語

发布： 2025-03-05 10:12:01

原创

433人浏览过

如何根据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重建文件夹结构较为复杂。更有效的方法包括：