javascript - 怎么通过文件上传的 files 列表还原 文件夹层级结构？

Question

在做文件上传时选择文件夹，获取到 files 列表。但是不存在文件夹的目录层级。怎么样通过file的webkitRelativePath来遍历还原出文件夹结构。例如：
获取到的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'          }        ]      }    ]  },]

非常感谢，已经卡在这里好久了，哪位大佬帮忙解决一下！

Answer 1

const files = [ ... ]interface File {    file: { webkitRelativePath: string }    Type: 'FILE'    name: string}interface Directory {    Type: 'DIR'    name: string    subdirectory: FileOrDir[]}type FileOrDir = File | Directoryconst separator = '/',    dir = new Map<string, Directory>([        ['', { Type: 'DIR', name: '', subdirectory: [] }]    ])function getOrCreateDir(path: string): Directory {    if (dir.has(path)) return dir.get(path)!    const paths = path.split(separator),        last = paths.slice(-1)[0],        parent = getOrCreateDir(paths.slice(0, -1).join(separator))    if (last === '') return parent    let d = parent.subdirectory.find(d => d.name === last)    if (d?.Type === 'FILE') throw new TypeError(`${path} is a file`)    if (d) {        dir.set(path, d)        return d    }    d = { Type: 'DIR', name: last, subdirectory: [] }    parent.subdirectory.push(d)    dir.set(path, d)    return d}files.forEach(f =>    getOrCreateDir(        f.file.webkitRelativePath.split(separator).slice(0, -1).join(separator)    ).subdirectory.push({ ...f, Type: 'FILE' }))console.log(Deno.inspect(dir.get('')?.subdirectory, { depth: 10 }))

Answer 2

文件得是 formdata， 这就限制了，你没办法传递，类似的办法是把名字改成全路径。

还有一种办法是把文件夹打包成 zip，这样就能保留目录了，缺点是服务端要解析。

反正左右都是要约定。你也可以直接约定一个数组，然后后端解析数组之后再重新挪一次位置我理解也可以

Answer 3

你可以通过递归的方式解决这个问题。首先，你需要按照 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'  }];// 根据webkitRelativePath排序files.sort((a, b) => a.file.webkitRelativePath.localeCompare(b.file.webkitRelativePath));function buildDirectoryStructure(files, currentPath = '') {  let structure = [];  let currentLevel = [];  for (let file of files) {    let filePath = file.file.webkitRelativePath;    let fileName = file.name;    if (filePath.startsWith(currentPath)) {      let relativePath = filePath.slice(currentPath.length);      let parts = relativePath.split('/');      let parent = currentLevel;      for (let i = 0; i < parts.length - 1; i++) {        let part = parts[i];        let child = parent.find(item => item.name === part && item.Type === 'DIR');        if (!child) {          child = { Type: 'DIR', name: part, subdirectory: [] };          parent.push(child);        }        parent = child.subdirectory;      }      let lastPart = parts[parts.length - 1];      let fileItem = { Type: 'FILE', file: file.file, name: fileName };      parent.push(fileItem);    }  }  structure.push({ Type: 'DIR', name: currentPath.split('/').pop(), subdirectory: currentLevel });  return structure;}const directory = buildDirectoryStructure(files);console.log(directory);

这个 buildDirectoryStructure 函数会递归地遍历文件列表，根据 webkitRelativePath 构建目录结构。注意，这个函数假设 webkitRelativePath 是相对于当前选择的文件夹的。如果 webkitRelativePath 是相对于文件系统的根目录，你可能需要稍微修改这个函数以适应你的需求。

这个实现也假设了 webkitRelativePath 是以 / 分隔的，并且每个文件夹名不包含 /。如果这些假设不成立，你可能需要修改这个函数以适应你的实际情况。