在前端开发中，文件上传是相当常见的功能。但是，当上传的文件过大时，会导致上传时间过长，甚至会造成服务器负担过重。为了解决这个问题，可以采用大文件分片上传的方式，将大文件分割成多个小文件进行上传，从而提高上传速度，减轻服务器负担。
Hapi 是一款 Node.js 的 Web 应用框架，支持大文件上传。本文将介绍如何在 Hapi 中实现大文件分片上传，并给出示例代码。
实现方式
大文件分片上传的实现方式通常有两种：
- 前端将大文件分割成多个小文件，依次上传到服务器，服务器将小文件合并成大文件。
- 前端将大文件分割成多个小文件，每个小文件并行上传到服务器，服务器将所有小文件合并成大文件。
在 Hapi 中，我们可以采用第一种方式实现大文件分片上传。具体实现步骤如下：
- 前端将大文件分割成多个小文件，每个小文件设置一个索引号，一起上传到服务器。
- 服务器接收到小文件后，将其存储到磁盘上，并记录下每个小文件的索引号。
- 当所有小文件都上传完成后，服务器按照索引号将小文件合并成大文件。
下面我们来看具体的实现步骤。
实现步骤
前端实现
在前端实现中，我们需要将大文件分割成多个小文件，并一起上传到服务器。在 Hapi 中，我们可以使用 axios 库来实现文件上传。
示例代码：
// www.javascriptcn.com code example
// 分割大文件
function splitFile(file, chunkSize) {
const chunks = [];
let start = 0;
let end = chunkSize;
while (start < file.size) {
chunks.push(file.slice(start, end));
start = end;
end += chunkSize;
}
return chunks;
}
// 上传文件
async function uploadFile(file) {
const chunkSize = 1024 * 1024; // 每个小文件的大小为 1MB
const chunks = splitFile(file, chunkSize); // 分割大文件
const totalChunks = chunks.length; // 小文件的总数
const filename = file.name; // 文件名
// 上传每个小文件
for (let i = 0; i < totalChunks; i++) {
const formData = new FormData();
formData.append('index', i);
formData.append('totalChunks', totalChunks);
formData.append('filename', filename);
formData.append('chunk', chunks[i]);
await axios.post('/upload', formData);
}
}在上面的示例代码中，我们首先使用 splitFile 函数将大文件分割成多个小文件，每个小文件的大小为 1MB。然后，我们使用 FormData 对象将每个小文件上传到服务器。
服务器实现
在服务器实现中，我们需要接收前端上传的小文件，并将其存储到磁盘上。在 Hapi 中，我们可以使用 hapi-payload 插件来实现文件上传。
示例代码：
// www.javascriptcn.com code example
const Hapi = require('@hapi/hapi');
const Inert = require('@hapi/inert');
const Payload = require('@hapi/payload');
const server = Hapi.server({
port: 3000,
host: 'localhost',
});
async function init() {
await server.register([Inert, Payload]);
server.route({
method: 'POST',
path: '/upload',
options: {
payload: {
output: 'stream',
parse: true,
allow: 'multipart/form-data',
maxBytes: 1024 * 1024 * 2, // 最大上传大小为 2MB
},
},
handler: async (request, h) => {
const data = request.payload;
const index = data.index;
const totalChunks = data.totalChunks;
const filename = data.filename;
const chunk = data.chunk;
const path = `uploads/${filename}-${index}`;
await chunk.pipe(fs.createWriteStream(path)); // 存储小文件
if (index === totalChunks - 1) {
// 所有小文件上传完成，合并小文件
const filePaths = Array.from({ length: totalChunks }, (_, i) => `uploads/${filename}-${i}`);
await mergeFiles(filePaths, `uploads/${filename}`);
}
return h.response('success');
},
});
await server.start();
console.log('Server running on %s', server.info.uri);
}
async function mergeFiles(filePaths, targetPath) {
const writeStream = fs.createWriteStream(targetPath);
for (const filePath of filePaths) {
const readStream = fs.createReadStream(filePath);
await new Promise((resolve) => {
readStream.pipe(writeStream, { end: false });
readStream.on('end', () => {
fs.unlinkSync(filePath);
resolve();
});
});
}
writeStream.end();
}在上面的示例代码中，我们首先使用 hapi-payload 插件来解析上传的文件。然后，我们将每个小文件存储到磁盘上，并记录下每个小文件的索引号。当所有小文件都上传完成后，我们使用 mergeFiles 函数将小文件合并成大文件。
学习和指导意义
本文介绍了在 Hapi 中实现大文件分片上传的方式，并给出了详细的实现步骤和示例代码。通过学习本文，读者可以了解到如何在 Hapi 中实现大文件分片上传的功能，以及如何使用 axios 库进行文件上传。
此外，本文还介绍了大文件分片上传的实现方式和原理，读者可以根据自己的实际需求选择合适的实现方式。
总之，本文对于想要实现大文件分片上传功能的前端开发人员具有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0e024a941bf71341d44c6