前端文件上传列表重建文件夹结构的有效方法
前端文件上传，特别是上传整个文件夹时，浏览器提供的 files 列表通常只包含文件的相对路径（例如，通过 webkitRelativePath 属性），缺乏文件夹的层级结构信息。本文探讨如何高效地将扁平化的 files 列表转换成具有文件夹层级结构的树形结构。
问题：如何从扁平化文件列表重建文件夹结构？
例如，我们获取到以下 files 列表：
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' } ] } ] }];
解决方案：避免客户端复杂重建，采用更有效的方法
即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。
36 查看详情
直接在客户端操作 files 列表重建文件夹结构较为复杂。以下几种替代方案更实用：
服务器端重建：修改文件名 在上传前，修改每个文件的文件名使其包含完整路径信息（例如，test/前端文件.pdf）。服务器端根据文件名即可重建文件夹结构。这种方法简化了前端工作，将逻辑转移到服务器端处理。
服务器端重建：ZIP压缩包 将文件夹压缩成 ZIP 文件后再上传。服务器端解压 ZIP 文件即可获得完整的文件夹结构。此方法虽然增加了服务器端处理负担，但前端实现简单，易于维护。
约定数组格式：前端预处理 设计一种包含文件路径和类型信息的约定数组格式，在前端构造好此数组，再传递给服务器端解析。这种方法需要定义清晰的协议，但能更好地控制数据结构。
选择哪种方法取决于具体应用场景和服务器端处理能力。 直接在客户端重建目录结构的方法复杂度高，维护成本大，上述替代方案更推荐。
以上就是如何将扁平化文件上传列表重建成具有文件夹层级结构的树形结构？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/274830.html
微信扫一扫 
支付宝扫一扫 
