重建上传文件文件夹结构
前端文件上传，尤其一次上传多个文件或整个文件夹时，获取到的文件列表通常只包含文件名和相对路径（例如，通过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' }
];
目标是将此扁平化数组转换为树状结构，例如：
魔法映像企业网站管理系统
下载
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
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压缩包上传，保留原始文件夹结构，但服务端需要解压。
- 自定义数据结构: 前端将文件信息整理成包含层级关系的数组，直接传递给后端。
- 全路径文件名: 修改文件名包含完整路径信息，前后端约定好数据格式。
所有这些方法都需要前后端约定好数据格式，确保数据能够被正确处理和解析。 选择哪种方法取决于项目需求和复杂度。
