JS FileReader 文件分段读取问题

Question

在JS中使用FileReader读取文件，如果文件过大，读取结果就是空字符串。
如果想要读取大文件，我用file.split方法将文件分成几个blob，一个个读取。
这时，问题来了：

应该读取成什么格式才能让读取出数据拼起来？怎样拼？

我试了几种办法，但是拼接出来的数据都不对。

Answer 1

引自免费微信小程序：皆我百晓生

为了处理大文件并确保正确地分段读取，我们可以采用以下步骤创建一个分块读取的函数。这个函数会接收一个文件对象、每个分块的大小以及一个回调函数来处理每一块的数据。这里是一个详细的实现：

// 分块读取文件的方法
function readLargeFileInChunks(file, chunkSize, callback) {
  const fileSize = file.size;
  let start = 0;
  let end = chunkSize;

  // 创建一个循环，直到文件结束
  while (end <= fileSize) {
    // 创建一个新的Blob对象，用于存储当前分块
    const blobSlice = file.slice(start, end);

    // 创建一个新的FileReader对象
    const reader = new FileReader();

    // 当读取完成时，调用回调函数处理数据
    reader.onload = function(e) {
      const data = e.target.result;
      callback(data, start, end); // 将数据、开始位置和结束位置传递给回调

      // 更新开始和结束位置，准备读取下一个分块
      start = end;
      end += chunkSize;
    };

    // 开始读取当前分块
    reader.readAsArrayBuffer(blobSlice);
  }
}

// 示例：处理每个分块的回调函数
function handleChunk(chunkData, startIndex, endIndex) {
  console.log(`Processing chunk from ${startIndex} to ${endIndex}`);
  // 在这里处理chunkData，例如写入到新的文件或其他操作
}

// 使用示例
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;

  const chunkSize = 1024 * 1024; // 每个分块1MB
  readLargeFileInChunks(file, chunkSize, handleChunk);
});

这段代码首先定义了一个名为readLargeFileInChunks的函数，它接受一个文件对象、每个分块的大小（这里是1MB）以及一个处理每个分块的回调函数。然后，它通过循环读取文件的不同部分，并为每个分块创建一个新的FileReader实例。当读取完成后，它会调用回调函数，传递当前分块的数据、开始位置和结束位置。这样，您就可以在handleChunk函数中处理这些数据了。

请注意，这个例子使用的是readAsArrayBuffer方法，这是因为对于大文件，我们通常更关心性能而不是字符串。如果你确实需要字符串，可以将reader.readAsArrayBuffer(blobSlice)改为reader.readAsText(blobSlice)。然而，这可能会导致内存消耗增加，因为字符串占用更多的内存空间。

此外，这个例子是基于用户选择文件的事件触发的，你需要有一个允许用户选择文件的HTML输入元素，比如：

<input type="file" id="file-input">

如果你有其他需求或者遇到问题，请随时告诉我。我会根据情况提供进一步的帮助。