如何根据webkitRelativePath属性还原上传文件的文件夹层级结构？

webkitRelativePath 是 HTML5 中 <input type="file"> 元素的一个属性，当用户通过文件选择器选择文件时，该属性会返回文件相对于用户选择的文件夹的相对路径。这个属性主要用于处理文件夹上传的场景，可以帮助你还原文件的文件夹层级结构。

要使用 webkitRelativePath 属性来还原上传文件的文件夹层级结构，你可以按照以下步骤进行：

1. 获取文件列表

首先，你需要获取用户选择的文件列表。可以通过 <input type="file"> 元素的 files 属性来获取。

<input type="file" id="fileInput" webkitdirectory multiple>

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
    const files = event.target.files;
    processFiles(files);
});

2. 解析 webkitRelativePath

每个文件对象都有一个 webkitRelativePath 属性，它表示文件相对于用户选择的文件夹的相对路径。你可以通过解析这个路径来还原文件夹结构。

function processFiles(files) {
    const folderStructure = {};

    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const relativePath = file.webkitRelativePath;
        const pathParts = relativePath.split('/');

        let currentLevel = folderStructure;

        for (let j = 0; j < pathParts.length - 1; j++) {
            const folderName = pathParts[j];

            if (!currentLevel[folderName]) {
                currentLevel[folderName] = {};
            }

            currentLevel = currentLevel[folderName];
        }

        const fileName = pathParts[pathParts.length - 1];
        currentLevel[fileName] = file;
    }

    console.log(folderStructure);
}

3. 构建文件夹结构

在上面的代码中，folderStructure 是一个对象，用于表示文件夹的层级结构。我们通过遍历每个文件的 webkitRelativePath，逐级创建文件夹和文件的嵌套结构。

4. 使用文件夹结构

一旦你构建了文件夹结构，你可以根据需要对其进行进一步处理。例如，你可以递归遍历这个结构，将文件和文件夹上传到服务器，或者在页面上展示文件夹层级。

示例输出

假设用户选择了一个包含以下文件的文件夹：

/folder1/file1.txt
/folder1/file2.txt
/folder2/subfolder/file3.txt

folderStructure 将会是：

{
    "folder1": {
        "file1.txt": File,
        "file2.txt": File
    },
    "folder2": {
        "subfolder": {
            "file3.txt": File
        }
    }
}

注意事项

• webkitRelativePath 是一个非标准属性，主要在现代浏览器中支持（如 Chrome、Edge 等）。如果你需要兼容性更好的解决方案，可能需要考虑其他方法。
• 如果你需要上传文件夹结构到服务器，你可能需要在服务器端处理文件夹的创建和文件的存储。

通过这种方式，你可以利用 webkitRelativePath 属性来还原上传文件的文件夹层级结构，并在前端或后端进行进一步处理。