掌握前端文件上传和后端处理，文件分块上传全攻略

前端

2022-11-30 22:08:18

文件分块上传：现代 Web 应用程序的必备功能

随着互联网的飞速发展，文件上传已经成为现代 Web 应用程序中不可或缺的功能。无论是在电子商务平台、社交媒体还是企业系统中，用户都需要上传各种类型的大文件，例如图像、视频、文档和压缩包。

然而，传统的文件上传方式存在着诸多弊端，例如：

上传失败率高： 大型文件上传容易受到网络中断或服务器处理能力不足的影响，导致上传失败。
上传速度慢： 上传大型文件需要花费较长的时间，尤其是对于低带宽网络环境下的用户。
无法断点续传： 如果上传过程中发生中断，则需要从头开始重新上传。

为了解决这些问题，文件分块上传技术应运而生。

什么是文件分块上传？

文件分块上传顾名思义，就是将大型文件分割成多个较小的块，然后逐个上传到服务器。这种方式可以有效避免网络中断或服务器处理能力不足导致的上传失败，从而提高文件上传的成功率和可靠性。

文件分块上传的实现

文件分块上传的实现分为前端和后端两个部分：

前端实现：

获取文件： 首先，我们需要获取用户选择的文件。可以使用 input type="file" 元素或拖放功能。
分割文件： 使用 File.slice() 方法将文件分割成多个块。每个块的大小可以根据实际情况设置，通常在 1MB 到 10MB 之间。
上传分块： 使用 XMLHttpRequest 或 fetch API 来上传分块。在上传时，需要指定分块的索引和总分块数，以便服务器能够正确处理。
合并分块： 当所有分块上传完成后，服务器需要将它们合并成一个完整的文件。通常可以使用流的方式来实现。

后端实现：

接收分块： 后端需要提供一个接口来接收前端上传的分块。可以使用 multer 或 busboy 等中间件来解析请求并保存分块。
合并分块： 当所有分块都接收完成后，后端需要将它们合并成一个完整的文件。可以使用 fs.writeFile() 或流的方式来实现。
返回结果： 合并完成后，后端需要将结果返回给前端。通常返回一个成功或失败的标志，以及合并后的文件的路径或下载链接。

文件分块上传的优点

文件分块上传具有以下优点：

提高上传成功率： 将大型文件分割成多个较小的块上传可以有效避免网络中断或服务器处理能力不足导致的上传失败。
提高上传速度： 文件分块上传可以并行上传多个块，从而提高上传速度。
断点续传： 如果上传过程中发生中断，可以使用断点续传功能继续上传，无需从头开始。
降低服务器压力： 文件分块上传可以减少服务器的压力，因为服务器只需处理较小的分块，而不是整个文件。

文件分块上传的适用场景

文件分块上传适用于以下场景：

上传大型文件：当需要上传大于 10MB 的文件时，可以使用文件分块上传。
不稳定网络环境：在不稳定网络环境中，可以使用文件分块上传来提高上传成功率。
高并发场景：在高并发场景下，可以使用文件分块上传来降低服务器压力。

代码示例

以下是一个使用 JavaScript 和 Node.js 实现文件分块上传的示例：

前端代码：

// 获取文件
const file = document.querySelector('input[type=file]').files[0];

// 分割文件
const chunks = file.slice(0, file.size, CHUNK_SIZE);

// 上传分块
const uploadChunk = (chunk, index) => {
  const formData = new FormData();
  formData.append('file', chunk);
  formData.append('index', index);
  formData.append('totalChunks', chunks.length);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    // 处理上传结果
  });
};

// 并行上传分块
chunks.forEach((chunk, index) => {
  uploadChunk(chunk, index);
});

后端代码：

// 接收分块
const upload = async (req, res) => {
  const file = req.files.file;
  const index = req.body.index;
  const totalChunks = req.body.totalChunks;

  // 保存分块
  await file.mv(`./uploads/${index}`);

  // 检查是否已上传所有分块
  if (index === totalChunks - 1) {
    // 合并分块
    const mergedFile = fs.createWriteStream(`./uploads/${file.name}`);
    for (let i = 0; i < totalChunks; i++) {
      const chunk = fs.createReadStream(`./uploads/${i}`);
      chunk.pipe(mergedFile);
    }

    // 返回上传结果
    res.json({ success: true, file: mergedFile.path });
  } else {
    // 返回成功信息
    res.json({ success: true });
  }
};