无视浏览器Blob和RAM大小限制，玩转文件保存新花样！

2023-09-04 12:13:41

在前端开发中，我们经常会遇到需要保存大文件的情况，但是浏览器的 Blob 对象和 <a download> 属性所设定的存储大小限制却让我们感到束手无策。Chrome 浏览器将 Blob 对象的最大存储大小限制在 2GB，而 Firefox 浏览器仅为 800MiB。本文将介绍一种解决方案——分片传输技术，帮助我们突破这些限制，实现大文件的保存。

问题描述

在前端开发中，我们经常需要处理大文件的上传和下载。然而，浏览器的 Blob 对象和 <a download> 属性所设定的存储大小限制却常常成为我们的障碍。Chrome 浏览器将 Blob 对象的最大存储大小限制在 2GB，而 Firefox 浏览器仅为 800MiB。这意味着，如果我们要上传或下载大文件，浏览器可能会抛出错误，阻止我们完成操作。

分片传输技术简介

为了解决这一难题，我们可以采用分片传输技术。这种技术将大文件分割成更小的分片，然后依次将它们发送到服务器。服务器接收到分片数据后，将其重新组装成完整的文件并进行存储。通过这种方式，我们可以有效地绕过浏览器的存储限制，实现大文件的上传和下载。

自定义 Blob 对象

为了实现分片传输，我们需要创建一个自定义的 Blob 对象。这个自定义 Blob 对象需要具备以下特性：

无存储大小限制
分割数据并依次发送的能力
接收分片数据并重新组装的能力

下面是一个简单的自定义 Blob 对象的实现：

class CustomBlob {
  constructor(data) {
    this.data = data;
    this.size = data.length;
  }

  slice(start, end) {
    return new CustomBlob(this.data.slice(start, end));
  }
}

分割大文件

接下来，我们需要将大文件分割成更小的分片。这里我们定义一个 splitFile 函数，它接受一个文件和一个分片大小作为参数，返回一个包含文件分片的数组：

function splitFile(file, chunkSize) {
  const chunks = [];
  for (let i = 0; i < file.size; i += chunkSize) {
    const chunk = file.slice(i, i + chunkSize);
    chunks.push(chunk);
  }
  return chunks;
}

依次发送分片数据

有了分片文件，我们需要将它们依次发送到服务器。这里我们定义一个 sendChunks 函数，它接受一个分片文件数组作为参数，依次将每个分片发送到服务器：

function sendChunks(chunks) {
  for (const chunk of chunks) {
    const formData = new FormData();
    formData.append('chunk', chunk);

    const request = new XMLHttpRequest();
    request.open('POST', '/upload');
    request.send(formData);
  }
}

服务器端重新组装文件

在服务器端，我们需要接收这些分片文件，并将它们重新组装成完整的文件。这里是一个简单的 Node.js 服务器端的实现：

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/upload' && req.method === 'POST') {
    let body = '';

    req.on('data', chunk => {
      body += chunk.toString();
    });

    req.on('end', () => {
      const chunks = JSON.parse(body);
      const file = new Blob(chunks);

      // 将文件存储到磁盘或其他存储介质
      file.save('downloaded-file.zip');
      res.end('File uploaded successfully');
    });
  } else {
    res.end('Invalid endpoint');
  }
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

示例代码

以下是一个完整的示例，演示如何使用分片传输技术保存大文件：

// 创建自定义 Blob 对象
const file = new File(['Hello, world!'], 'hello.txt', { type: 'text/plain' });
const customBlob = new CustomBlob(file);

// 分割大文件
const chunkSize = 1024 * 1024; // 将文件分成 1MB 大小的分片
const chunks = splitFile(customBlob, chunkSize);

// 依次发送分片数据
sendChunks(chunks);