从扁平文件列表重建文件夹结构
前端文件上传，特别是文件夹上传，通常只返回文件名和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' }];
目标是将其转换为如下树形结构：
即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。
36 查看详情
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文件再上传，服务器端解压，保留文件夹结构。 这需要服务器端额外处理解压逻辑。
此外，还可以考虑前端约定数据结构，例如在上传数据中直接包含文件夹信息，由后端解析。 这需要前后端约定好数据格式，但简化前端处理。
以上就是如何利用webkitRelativePath属性还原扁平文件列表为带有文件夹层级结构的树形结构？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/273602.html
微信扫一扫 
支付宝扫一扫 
