浏览器在客户端读取大文件夹时挂起答案

【问题标题】：Browser hangs on reading large folder on client side浏览器在客户端读取大文件夹时挂起
【发布时间】：2021-02-05 21:16:25
【问题描述】：

我正在尝试创建一个简单的文件夹上传器（客户端）。最低要求的功能是能够选择文件夹/文件并在浏览器上显示所有文件的信息。我使用了一个简单的输入元素：

const ReadFolder = () => {
    const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => console.log(event.target.files);
    return (
        <input
          type='file'
          directory
          webkitdirectory
          multiple
          onChange={onFileChange}
        />
    );
}

onFileChange 函数只显示接收文件列表的信息。

它适用于小文件夹，但是当我尝试从我的计算机（具有大型嵌套文件夹层次结构）上传 git 存储库时，浏览器窗口在报告 onChange 事件之前大约 2 分钟无响应。有没有办法避免这种反应迟钝？我可以将此处理推送到后台（或网络工作者）吗？

【问题讨论】：

我该怎么做？
@NotABot - 如果不了解 onFileChange 正在做什么，我认为我们无法为您提供帮助。旁注：onChange={(event: React.ChangeEvent<HTMLInputElement>) => onFileChange(event)} 可能只是 onChange={onFileChange}。
@T.J.Crowder 我已经更新了代码。我认为onFileChange 函数的作用并不重要，因为它在浏览器崩溃之前永远不会收到事件，这是实际问题。无论如何，我已经添加了函数的示例定义，如果您想知道，这个代码 sn-p 也存在问题:(

标签： javascript html fileapi

【解决方案1】：

此处理甚至可能不是由浏览器的进程完成，而是由操作系统直接完成，它正在为目录及其子目录中的所有文件构建元数据列表。那是很多 I/O。
当浏览器通过询问时，您不是第一个报告某些配置（操作系统或文件系统，我仍然不清楚）无法生成文件元数据的问题的人。

因此，将任何东西转移给 Worker 很可能根本没有帮助。我有根据的猜测是您的硬盘是瓶颈，而不是 CPU。

您可以尝试in supporting browsers，请求对目录的句柄，而不是在一次调用中请求所有文件。
新的文件系统 API 有一个 showDirectoryPicker 方法，它允许您访问目录，并只读取您需要的文件，如果您需要它们，以流式方式执行此操作，允许您的页面在解析时渲染已经解析的部分。

您可以看到live demo here，目前只能在 Chrome 中使用。

请注意，directories gotten from a drag&drop event 也不应该被完全阅读，并且您还应该能够使用 better browser support 批量导航它们，因此如果可以，请尝试让您的 UI 强制您的用户使用此方法而是。

【讨论】：

Google drive 也支持文件夹上传，但是我在上传的时候没有遇到这个问题。如果这是操作系统问题，他们是如何实现的
在我的操作系统上，页面并不是真的没有响应，但是 onchange 需要很长时间才能触发。我刚刚尝试将完整的 Chromium 源上传到 drive.google，但它使我的 Firefox 崩溃，在 Chrome 上它让我的笔记本电脑相信它是一架直升机，所以我在得到任何 onchange 之前就把它杀了。但是 FWIW，他们显然确实使用了一个简单的，至少在 macOS 上，也许在 Windows 上他们确实使用了一些 Chrome 插件（我知道他们在其他谷歌网站上这样做），这将启用我在 @987654326 中使用的相同功能@.
这正是我想要的。但我想这不能在所有浏览器（至少 Chrome、Firefox 和 Safari）中实现？
目前没有只有 Chrome 实现过。