从扁平文件列表重建文件夹结构
前端文件上传，特别是文件夹上传，通常只返回文件名和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' }
]
}
]
}
];
一种方法是遍历files数组，根据webkitRelativePath构建树形结构。 通过分割路径字符串，确定文件所属文件夹，逐步构建树形结构。 这需要仔细处理路径解析，确保层级关系正确。
另一种方法是将文件夹压缩成zip文件再上传，服务器端解压，保留文件夹结构。 这需要服务器端额外处理解压逻辑。
此外，还可以考虑前端约定数据结构，例如在上传数据中直接包含文件夹信息，由后端解析。 这需要前后端约定好数据格式，但简化前端处理。
