如何在 Nest 中轻松实现大文件分片上传：详细步骤与实战代码

前端

2023-01-03 20:25:37

NestJS 分片上传：告别大文件上传的痛点

网络的挑战

在现代网络应用中，大文件上传已司空见惯，但传统的文件上传方式却存在诸多痛点，例如：

网络不稳定导致上传失败： 网络波动可能中断上传过程，导致文件丢失或损坏。
服务器资源消耗大： 一次性上传大文件会占用大量服务器资源，特别是在并发上传的情况下。
上传时间长： 文件越大，上传耗时越久，影响用户体验。

NestJS 分片上传的救星

NestJS 分片上传功能应运而生，它将大文件分割成更小的片段，分批上传到服务器。这种方式巧妙地解决了上述痛点：

提升稳定性： 即使在网络不稳定时，片段化上传也能保证文件完整性，避免失败。
优化资源利用： 分批上传分散了服务器负载，降低资源消耗。
缩短上传时间： 多片段并发上传，有效缩短整体上传时长。

分步实现 NestJS 分片上传

项目初始化： 使用 NestJS CLI 创建项目或在已有项目中安装 NestJS。
安装依赖： 引入 multer 和 busboy 依赖，分别负责文件上传处理和分片上传。
控制器与服务： 创建控制器处理文件上传请求，以及服务负责分片上传和文件保存。
Multer 配置： 配置 Multer 中间件，设置文件大小限制和类型等。
文件上传处理： 在控制器中定义路由处理上传请求，并使用 Multer 解析上传的文件。
分片上传： 利用 busboy 将文件分割成片段，并按序上传到服务器，同时发送片段索引、总片段数等信息。
片段合并： 在服务中将上传的片段合并成一个完整的文件，并保存到服务器。
响应返回： 根据上传结果向客户端返回信息，成功则返回文件信息，失败则返回错误提示。

实战代码示例

以下展示关键代码片段，说明如何使用 NestJS 实现分片上传：

控制器

@Post('upload')
async uploadFile(@Request() req) {
  // Multer 解析上传的文件
  const file = await multer(config).single('file')(req);

  // 分片文件
  const chunks = await splitFile(file.buffer, 1024 * 1024);

  // 分批上传片段
  for (let i = 0; i < chunks.length; i++) {
    const chunk = chunks[i];
    await uploadChunk(chunk, i, chunks.length, file.originalname);
  }

  // 合并文件片段
  await mergeChunks(file.originalname);

  // 返回上传结果
  return { message: 'File uploaded successfully' };
}

服务

async splitFile(fileBuffer, chunkSize) {
  // 分割文件为片段
  const chunks = [];
  for (let i = 0; i < fileBuffer.length; i += chunkSize) {
    chunks.push(fileBuffer.slice(i, i + chunkSize));
  }
  return chunks;
}

async uploadChunk(chunk, index, totalChunks, filename) {
  // 使用 busboy 上传文件片段
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('index', index);
  formData.append('totalChunks', totalChunks);
  formData.append('filename', filename);

  await axios.post('/api/upload-chunk', formData);
}

async mergeChunks(filename) {
  // 合并上传的片段
  const chunks = await getChunks(filename);
  const mergedFile = Buffer.concat(chunks);

  // 保存合并后的文件
  await fs.writeFile(`./uploads/${filename}`, mergedFile);
}