FileReader读取大文件

发表于 2024-03-31 更新于 2024-11-30 本文字数： 830 阅读时长 ≈ 1 分钟

本文是作者对FileReader读取大文件的介绍，包括FileReader读取大文件的优势、实现细节、相关资料等，这些步骤可以帮助作者提高FileReader读取大文件的效率。

前端采用FileReader可以读取文件内容，但是在读取大文件，比如1-3GB文件时发现会有显著卡顿。这里Mark下优化办法。

卡顿原因

全量读取文件的话，文件内容会都存入浏览器内存中，因此会出现卡顿。

解决办法

文件file进行slice分片，每次异步读取分片数据。

const chunkSize = 1 * 1024 * 1024; // 1MB
      function readChunk(file, start, chunkSize) {
        const reader = new FileReader();
        return new Promise(resolve => {
          reader.onload = (evt) => {
            // console.log(evt.target.result);
            resolve(evt.target.result);
          };
          reader.readAsArrayBuffer(file.slice(start, Math.min(start + chunkSize, file.size)));
        })
      }