在使用 web 应用程序时，文件上传功能是非常常见的。然而，在前端领域中实现这种功能并不是件容易的事情。Hapi.js 框架提供了一种简单的方式实现前端的文件上传功能。
本文将介绍如何使用 Hapi.js 实现文件上传功能。我们首先了解一下 Hapi.js，然后进入正题进行实现。
Hapi.js 简介
Hapi.js 是一个 Node.js Web 应用框架，基于配置简单的理念，力图使开发者可以快速构建出高质量的 Web 应用。Hapi.js 全面支持插件，可以通过插件来增强功能、降低藕合度并且可以实现高度的可重用性。
Hapi.js 实现文件上传
在 Hapi.js 中，使用 nes 插件与 XMLHttpRequest（XHR）对象来实现文件上传。
步骤 1：安装 Hapi.js
首先，需要在你的项目中安装 Hapi.js。
npm install hapi
步骤 2：安装 nes 插件
然后，安装 nes 插件。
npm install nes
步骤 3：上传文件
准备工作做完了，接下来就可以开始实现文件上传了。
首先，我们需要在服务器端创建一个接收上传文件的路由函数。在这个函数中，我们使用 nes 插件的 broadcast() 方法向所有连接的客户端发送消息。
// www.javascriptcn.com code example
server.route({
method: 'POST',
path: '/',
config: {
payload: {
maxBytes: 104857600,
output: 'stream',
parse: true,
allow: 'multipart/form-data'
}
},
handler: (request, h) => {
const { payload } = request;
const file = payload.file;
const filename = file.hapi.filename;
// 保存文件
let data = file._data;
const message = `文件 ${filename} 上传成功`;
// 向所有连接的客户端广播消息
server.plugins.nes.broadcast(message);
return h.response(message);
}
})随后，在客户端我们创建一个 HTML 文件，包含一个上传文件的表单。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hapi.js 文件上传</title>
</head>
<body>
<form id="uploadForm" action="/" enctype="multipart/form-data" method="post">
<input type="file" name="file"/>
<input type="submit" value="上传"/>
</form>
<script src="https://unpkg.com/nes@6.0.2/dist/browser.min.js"></script>
<script>
const socket = new Nes.Client('ws://localhost:3000');
socket.connect(() => {
socket.onConnect = () => {
console.log('连接成功');
};
socket.onDisconnect = () => {
console.log('连接断开');
};
socket.onError = () => {
console.log('连接错误');
};
socket.onMessage = (message, flags) => {
console.log(message);
};
});
const uploadForm = document.getElementById('uploadForm');
uploadForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(uploadForm);
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percentComplete = event.loaded / event.total * 100;
console.log(`上传进度：${percentComplete}%`);
}
});
xhr.addEventListener('load', () => {
console.log(xhr.responseText);
});
xhr.open('POST', '/');
xhr.setRequestHeader('Authorization', socket.authToken);
xhr.send(formData);
});
</script>
</body>
</html>在客户端，我们通过 new Nes.Client() 构建了一个 WebSocket 连接，然后将上传的表单数据用 FormData 对象包装起来，通过 XMLHttpRequest() 对象来发送 POST 请求。上传文件时，我们实时监控上传进度，并将信息发送给所有连接的客户端。
到这里为止，我们就完成了 Hapi.js 文件上传功能的实现。通过上述的例子，我们可以看到 Hapi.js 在使用上非常简单，而且功能强大。希望这篇文章对你学习 Hapi.js 文件上传功能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6d9b7a941bf7134cb905e