前端文件上传列表重建文件夹结构的有效方法
前端文件上传，特别是上传整个文件夹时，浏览器提供的 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' }
]
}
]
}
];
解决方案：避免客户端复杂重建，采用更有效的方法
直接在客户端操作 files 列表重建文件夹结构较为复杂。以下几种替代方案更实用：
-
服务器端重建：修改文件名 在上传前，修改每个文件的文件名使其包含完整路径信息（例如，
test/前端文件.pdf）。服务器端根据文件名即可重建文件夹结构。这种方法简化了前端工作，将逻辑转移到服务器端处理。 -
服务器端重建：ZIP压缩包 将文件夹压缩成 ZIP 文件后再上传。服务器端解压 ZIP 文件即可获得完整的文件夹结构。此方法虽然增加了服务器端处理负担，但前端实现简单，易于维护。
-
约定数组格式：前端预处理 设计一种包含文件路径和类型信息的约定数组格式，在前端构造好此数组，再传递给服务器端解析。这种方法需要定义清晰的协议，但能更好地控制数据结构。
选择哪种方法取决于具体应用场景和服务器端处理能力。 直接在客户端重建目录结构的方法复杂度高，维护成本大，上述替代方案更推荐。
