在实际的前端开发中，文件上传是非常常见的功能之一。而对于 Node.js 平台上的后端开发来说，Hapi 是一款非常流行的框架。那么在 Hapi 中如何处理上传文件呢？本文将会详细介绍 Hapi 中文件上传的处理方式。
上传文件的准备工作
在开始处理上传文件之前，我们需要先进行一些准备工作。首先，需要安装一些必要的依赖包：
npm install hapi inert joi multer --save
其中，
hapi是 Hapi 框架本身。inert是用于静态文件服务的插件，它可以让 Hapi 轻松地处理静态文件。joi是用于验证数据的库，用于验证上传的文件类型和大小等信息。multer是用于处理上传文件的库。
在安装好这些依赖包之后，就可以开始处理文件上传了。
处理上传文件
在 Hapi 中处理上传文件需要使用 multer 库。multer 是一个非常方便的库，它可以简化我们在处理上传文件时需要进行的很多操作，例如文件上传、文件大小限制、文件类型限制等。
实现文件上传的接口
我们可以通过如下代码来实现一个接口，用于上传文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- --- - ---------------
----- ------ - ------------------
----- ------ - --- -------------
----- -----
----- -----------
---
----- -------- ------ -
-- ----
----- -----------------------
-- -- ------ ---
----- ------- - --------------------
------------ -------- ----- ----- --- -
-------- --------------
--
--------- -------- ----- ----- --- -
-------- -------------------
-
---
----- ------ - --------
-------- --------
------- -
--------- ---- - ---- - - -- ------- - --
-
---
-- ----
--------------
------- -------
----- ----------
-------- ----- -------- --------- -- -
----- - ------- ----- - - ----- --- ----------------- ------- -- -
----------------------------- ---------------- ----- -- -
-- ----- ------ ------------
--------- ------- ------------- ------ ------------- ---
---
---
------ ------------ ------- ----- ---
--
-------- -
-------- -
--------- ---- - ---- - -- -- ------- - --
------- ---------
------ -----
------ ----------------------
---------- ----
--
--------- -
-------- -
----- ---------
-----------
--------------------
-
--
------------ ---------
------ ---- ------------------- ----------
----- -------
-
---
----- ---------------
------------------- ------- -- - - -----------------
-
-------------------------------- ----- -- -
-----------------
----------------
---
-------在上述代码中，我们首先引入了必要的依赖包，并创建了一个 Hapi 服务器实例。然后，我们通过 Multer.diskStorage() 方法创建了文件存储配置对象，包含文件存储目录和文件名。接着，我们使用 Multer() 方法创建一个 Multer 中间件实例，配置了文件存储的位置和文件大小限制。最后，我们通过 Hapi 的 server.route() 方法定义了一个 POST 请求的路由，处理用户上传的文件，并返回上传结果。
在前端上传文件
在前端实现文件上传，有多种实现方式，这里提供一种使用 FormData 和 XMLHttpRequest 的方式：
-- -------------------- ---- -------
----- --------- - ---------------------------------------------
------------------------------------ -- -- -
----- ---- - -------------------
----- -------- - --- -----------
----------------------- ------
----- --- - --- -----------------
---------------- ---------- ------
---------- - ---------- -
-- ----------- --- ---- - ------- -
----- -------- - -----------------------------
----------------------
-
-------------------
---在上面的代码中，我们首先使用 querySelector 方法选取到一个文件输入框，并在文件改变时获取到文件。接着，我们使用 FormData() 方法创建一个 FormData 对象，并将选取的文件添加到其中。然后，我们使用 XMLHttpRequest() 方法创建了一个 AJAX 请求，并发送到后端。最后，我们在 AJAX 请求的回调函数中处理返回结果。
总结
通过本文的介绍，我们了解了 Hapi 中如何处理上传文件：使用 multer 库实现文件上传的接口，并在前端通过 FormData 和 XMLHttpRequest 实现文件上传功能。希望本文对您有所帮助，如果您在实际的开发中遇到问题，可以在评论区留言提问，我们将会尽快回复解答。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455e8ff968c7c53b0941f56
