React含特殊字符文件夹上传：子文件夹无法识别问题求助

问题核心在于对webkitRelativePath的结构判断错误，同时存在对象长度获取的误用。特殊字符本身不会影响路径分割，无需额外编码处理。

修复步骤： #

• 修正子文件夹文件的判断条件：使用webkitdirectory选择文件夹时，一级子文件夹内的文件路径格式为子文件夹名/文件名，对应pathParts.length为2，原判断pathParts.length > 2会漏掉这类文件，需改为pathParts.length >= 2。
• 移除不必要的编码：文件夹名称中的[]{}等特殊字符不会干扰split('/')，也能正常作为对象键，无需encodeURIComponent处理。
• 正确获取文件夹数量：folders是普通对象，需用Object.keys(folders).length替代.length获取键的数量。

修正后的代码： #

const handleParameterSearchUpload = async (event) => {
    const files = event.target.files;
    console.log(files);
    const folders = {};

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

      // 捕获所有子文件夹下的文件
      if (pathParts.length >= 2) {
        // 取一级子文件夹名称作为分类键
        const folderName = pathParts[0];
        if (!folders[folderName]) {
          folders[folderName] = [];
        }
        folders[folderName].push(file);
      }
    }
    // 正确输出文件夹数量
    console.log(Object.keys(folders).length);
    // 处理每个文件夹下的文件
    for (const folderName in folders) {
      const folderFiles = folders[folderName];
      await processFiles(folderFiles, true);
      console.log("Processed", folderName);
    }
    parameterSearchInputRef.current.value = "";
};

多级子文件夹适配（可选）： #

如果存在多级嵌套子文件夹（如子文件夹A/子文件夹B/文件），需要保留完整路径分类的话，可修改folderName的获取逻辑：

// 取文件所在的完整父文件夹路径（排除文件名）
const folderName = pathParts.slice(0, -1).join('/');

内容的提问来源于stack exchange，提问作者Norbi