如何根据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压缩包上传，保留原始文件夹结构，但服务端需要解压。自定义数据结构: 前端将文件信息整理成包含层级关系的数组，直接传递给后端。全路径文件名: 修改文件名包含完整路径信息，前后端约定好数据格式。

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

以上就是如何根据webkitRelativePath属性还原上传文件的文件夹层级结构？的详细内容，更多请关注【创想鸟】其它相关文章！