时间戳

首页 > 解决方案 > 浏览器在客户端读取大文件夹时挂起

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

问题描述

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

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 分钟变得无响应。有没有办法避免这种反应迟钝？我可以将此处理推送到后台（或网络工作者）吗？

标签： javascripthtmlfileapi

解决方案

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

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

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

您可以在此处查看现场演示，该演示目前仅适用于 Chrome。

请注意，从拖放事件中获取的目录也不应该被完全读取，并且您还应该能够通过更好的浏览器支持批量导航它们，因此如果可以，请尝试让您的 UI 强制您的用户使用此方法反而。

推荐阅读