在使用 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() 方法向所有连接的客户端发送消息。
-- -------------------- ---- -------
--------------
------- -------
----- ----
------- -
-------- -
--------- ----------
------- ---------
------ -----
------ ---------------------
-
--
-------- --------- -- -- -
----- - ------- - - --------
----- ---- - -------------
----- -------- - -------------------
-- ----
--- ---- - -----------
----- ------- - --- ----------- ------
-- -------------
--------------------------------------
------ --------------------
-
--随后，在客户端我们创建一个 HTML 文件，包含一个上传文件的表单。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------
-------
------
----- --------------- ---------- ----------------------------- --------------
------ ----------- -------------
------ ------------- ------------
-------
------- ---------------------------------------------------------------
--------
----- ------ - --- ----------------------------------
----------------- -- -
---------------- - -- -- -
--------------------
--
------------------- - -- -- -
--------------------
--
-------------- - -- -- -
--------------------
--
---------------- - --------- ------ -- -
---------------------
--
---
----- ---------- - --------------------------------------
------------------------------------- ------- -- -
-----------------------
----- -------- - --- ---------------------
----- --- - --- -----------------
--------------------------------------- ------- -- -
-- ------------------------ -
----- --------------- - ------------ - ----------- - ----
----------------------------------------
-
---
---------------------------- -- -- -
------------------------------
---
---------------- -----
------------------------------------- ------------------
-------------------
---
---------
-------
-------在客户端，我们通过 new Nes.Client() 构建了一个 WebSocket 连接，然后将上传的表单数据用 FormData 对象包装起来，通过 XMLHttpRequest() 对象来发送 POST 请求。上传文件时，我们实时监控上传进度，并将信息发送给所有连接的客户端。
到这里为止，我们就完成了 Hapi.js 文件上传功能的实现。通过上述的例子，我们可以看到 Hapi.js 在使用上非常简单，而且功能强大。希望这篇文章对你学习 Hapi.js 文件上传功能有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d6d9b7a941bf7134cb905e