随着前端应用的不断发展和用户体验的逐步提高，上传大文件的需求也越发常见。然而由于网络限制等因素，直传大文件往往存在很多问题，比如文件传输过程中网络抖动导致上传失败等情况。在这种情况下，分片上传是一种比较常见、可行的解决方案。
Fastify 是一款高效的 Node.js Web 框架，具有出色的性能和易于扩展的特点。下面，我们将详细介绍在 Fastify 框架中实现分片上传方案的具体实现方法。通过这篇文章的学习，读者可以了解到如何使用 Fastify 实现分片上传功能，理解其工作原理并将其应用到自己的项目中。
准备工作
在开始之前，我们需要准备一些基础的工具和环境：
- 必须使用 Node.js v10 或以上版本
- 安装 Fastify 和 fastify-multipart 插件：
npm install fastify fastify-multipart - 配置 fastify-multipart 插件
我们在 Fastify 中，使用 fastify-multipart 插件能够轻松实现文件上传的功能。在使用前，我们要先进行相关配置。以下是一个 fastify-multipart 和 Fastify 的示例配置：
// javascriptcn.com 代码示例
const fastify = require('fastify')()
// 注册 fastify-multipart 插件
fastify.register(require('fastify-multipart'), {
limits: {
fieldNameSize: 100, // 字段名长度最大值
fieldSize: 1000000, // 字段值大小最大值
fields: 10, // 字段数量最大值
fileSize: 1000000, // 文件大小最大值
files: 1, // 文件数量最大值
headerPairs: 2000 // 请求头键值对数量最大值
}
})分片上传设计
在实现分片上传之前，我们需要先了解其原理和设计思路。在分片上传的过程中，我们需要把大文件分隔成多个小文件上传，再在服务端将这些小文件组装起来。一般来说，分片上传包含以下几个步骤：
- 首先，前端应用会将大文件分成固定大小的块，并在上传时将这些块通过 HTTP POST 请求分段上传到服务器中
- 服务器接受这些小文件块，存储在一个特殊区域中，直到整个文件上传完成
- 当所有块都上传完成后，服务器合并所有块，将其组成完整的文件并存储到指定位置上
在实际的应用中，我们需要对每个上传文件的状态进行管理。一般情况下，我们会记录以下四个状态：
- 新文件：文件尚未上传，服务器没有任何块信息
- 部分上传：文件只上传了部分块，服务器已经接受到一些块文件信息
- 上传中：文件正在上传，服务器已经接受到所有块文件信息，但没有进行合并
- 已完成：文件上传完成并成功存储在指定位置上
通过以上设计思路，我们可以实现分片上传功能，让系统能够更加稳定地传输大文件，提高系统的用户体验。
分片上传实现
有了以上的准备工作和设计思路，接下来我们开始分片上传功能的实现。这里我们采用 Fastify 和 fastify-multipart 插件作为后端框架和文件上传支持，以实现分片上传功能的具体实现步骤如下：
1. 前端：将文件分割成一定大小的块
在前端，我们需要使用 JavaScript 将文件按照一定的大小分割成块，实现分块上传的功能。具体实现代码如下：
// javascriptcn.com 代码示例
function sliceFile(file) {
const fileSize = file.size; // 文件大小
const sliceSize = 1024 * 1024; // 块大小
const sliceCount = Math.ceil(fileSize / sliceSize); // 块数量
const slices = [];
for (let i = 0; i < sliceCount; i++) {
const start = i * sliceSize;
const end = Math.min(start + sliceSize, fileSize);
const slice = file.slice(start, end);
slices.push(slice);
}
return slices;
}在以上代码中，我们将文件划分成指定大小的块，并存储在一个数组 slices 中，以便后续上传。
2. 前端：上传文件块
在前端，我们可以使用 HTTP POST 请求将分割后的文件块上传到服务器。具体实现代码如下：
// javascriptcn.com 代码示例
function uploadSlice(endpoint, slice) {
const formData = new FormData(); // 构造 FormData
formData.append('file', slice); // 添加块
// 发送 POST 请求
return fetch(endpoint, {
method: 'POST',
body: formData,
});
}在以上代码中，我们使用 Fetch API 发送 HTTP POST 请求，将文件块上传到服务器。
3. 后端：接收上传的文件块并存储
在服务器端，我们需要接收前端发送过来的小文件块，并在指定位置存储。要实现这一功能，我们首先需要在 Fastify 上注册 fastify-multipart 插件，然后根据前端上传的块序号，将块文件按照顺序进行存储（服务端代码）：
// javascriptcn.com 代码示例
// 定义一个全局变量，用于存储所有上传的块的信息
const chunks = {};
fastify.post('/upload/:id', async function (request, reply) {
const { id } = request.params;
const data = await request.file();
const index = Number(data.fieldname.split('.')[1]); // 获取块编号
const chunk = chunks[id] || [];
chunk[index] = data.file; // 存储块文件
chunks[id] = chunk;
reply.send('File uploaded!');
})在以上代码中，我们首先根据文件 ID 获取到对应的块信息，再通过解析请求参数获取块编号和块文件，最后将块文件存储在对应的块信息中。
4. 后端：检查是否上传完成
在所有文件块上传完成后，我们需要在服务端检查是否所有块文件都已经上传，从而确保尽可能多的块文件上传成功。如果存在上传失败的块，则需要重新上传。在所有块文件成功上传后，我们需要组装块信息，并将其整合成完整的文件。具体实现代码如下：
// javascriptcn.com 代码示例
// 定义检查是否上传完成的路由
fastify.get('/status/:id', async function (request, reply) {
const { id } = request.params;
const chunk = chunks[id] || [];
const isUploadFinished = chunk.every(item => !!item);
if (isUploadFinished) {
const filePath = 'uploads/' + id + '.jpg';
const ws = fs.createWriteStream(filePath);
for (let i = 0; i < chunk.length; i++) {
ws.write(chunk[i].data);
}
ws.end();
chunks[id] = null;
reply.send('File upload finished!');
} else {
reply.send('File upload not finished yet!');
}
});在以上代码中，我们首先获取上传文件的块信息，判断是否所有块都已经上传完成。如果存在未上传的块信息，则返回错误信息并提示文件上传未完成；否则，我们将所有块文件凭借在一起，组成完整的文件，并将其保存到指定位置上。最后，我们将所有块信息清除，以便后续的上传操作。
总结
以上就是在 Fastify 框架中实现分片上传方案的详细指南。通过本篇文章的学习，我们了解到了分片上传的原理和设计思路，以及具体实现步骤。通过实现这一功能，我们能够更加稳定地传输大文件，提高系统的用户体验，满足用户的实际需求。在实际应用中，我们需要根据具体的业务需求，进一步完善这一功能，并不断优化其性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f6cf37d4982a6eb08d88f