带webkitdirectory属性的HTML Input在不同设备上默认排序不一致

const files = Array.from((event.target as HTMLInputElement).files || [])

const filesByDirectory = R.groupBy(files, (file) =>
    file.webkitRelativePath.split("/").slice(0, -1).join("/")
)

for (const folder of filesByDirectory) {
    await this.uploadFiles(filesByDirectory[folder], folder.split("/").pop() as string)
}

异常原因 #

• 浏览器通过webkitdirectory获取的文件列表顺序，完全继承操作系统文件系统的枚举顺序，浏览器自身不会对文件/文件夹做额外排序。
• 那台异常的Windows 11设备，其文件夹排序规则被修改过：用户大概率在文件资源管理器中，将文件夹的默认排序设置为了名称降序（而非系统默认的升序）。Windows的文件枚举API会遵循当前用户的文件夹视图排序设置，浏览器直接读取这个结果，因此出现降序的情况。

背后的默认规则 #

• HTML标准并未规定webkitdirectory返回的FileList的排序顺序，因此不存在跨平台/跨设备的统一默认排序逻辑。
• 不同系统的默认行为：
  • Windows：默认按名称升序排列文件/文件夹，但用户可通过「文件夹选项」修改全局或单个文件夹的排序规则（如按名称降序、修改时间、类型等），修改后的规则会影响所有读取该目录的程序（包括浏览器）。
  • Linux（如Ubuntu）：默认按字母升序排列，同样可通过桌面环境的文件管理器调整排序设置。
  • macOS：默认按字母升序排列，支持自定义排序规则。
• 代码层面：你用R.groupBy生成的filesByDirectory对象，其键的顺序遵循ES6+的对象属性插入顺序——即FileList中文件的出现顺序，而这个顺序完全由操作系统的枚举结果决定。

补充说明 #

你已经添加的手动排序逻辑是正确的做法，因为依赖系统默认排序会导致跨设备/跨用户的行为不一致，只有显式排序才能保证上传顺序的统一性。

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