在前端开发中，处理文件上传和图片预览功能是非常常见的需求。本文将介绍如何使用 Hapi.js 中的 Inert 和 Vision 插件来实现上传文件和预览图片的功能。
Inert 和 Vision 插件
在 Hapi.js 中，Inert 和 Vision 是两个非常有用的插件。Inert 插件提供了一种静态文件服务的方法，使得我们可以轻松地将文件服务添加到我们的应用程序中。Vision 插件则提供了一种模板渲染的方法，让我们可以轻松地在应用程序中使用模板。
文件上传功能的实现
在 Hapi.js 中，可以通过使用 hapi/boom 和 hapi/payload 两个包来实现文件上传功能。以下是一个简单的文件上传示例:
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- ------- - ------------------------
----- ------ - --- --------------
-------------------
----- ------------
----- ----
---
--------------
------- -------
----- ----------
------- -
-------- -
------- ---------
------ -----
------ ---------------------
--
-------- -------- --------- ------ -
------------------------- -
------ ------------------------- ---- -------------
-
----- ---- - ---------------------
----- ---- - -------------------
----- ---- - --------- - ----------- - -----
----- ------ - --------------------------------------
------------------ -------- ----- -
------ ------------------------------------
---
------------------
-------------- -------- ----- -
----- ----------- - -
---------- ---------------
------------- -----
----------- -----
--------- ----------------------------------
----- -------------------
--
------ -------------------
---
-
-
---
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- --- ---------------------
---在上面的示例中，我们首先定义了一个路由，监听 /upload 地址的 POST 请求。然后我们通过配置 payload 来告诉 Hapi.js 我们将接收一个 multipart/form-data 类型的文件上传请求。在路由配置中，我们可以通过 request.payload 来访问上传的文件。这里我们首先检查 request.payload.file 是否为空，如果为空则返回一个错误信息。如果上传的文件存在，则通过 fs 模块来创建一个文件流并将文件写入到指定的文件路径中。
在示例中，我们使用的是 createWriteStream() 方法来创建一个可写流，这里的流是对一个文件进行操作。writer 变量是一个可写流，我们可以通过 pipe() 方法将文件流与写入流连接起来，这样在上传的时候，上传的文件会直接被写入到指定的文件路径中。
图片预览功能的实现
图片预览功能主要是用来显示用户上传的图片。在 Hapi.js 中，可以使用 Inert 和 Vision 插件来轻松地实现图片预览的功能。以下是示例代码:
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- ------ - ------------------
----- ------ - --- --------------
-------------------
----- ------------
----- ----
---
-----------------
------
------
-- ----- -- -
-- ----- -
------------------- -- ---- --------- -----
-
--------------
-------- -
----- ---------------------
--
----- --------- - ---------
------- --------
---
---
--------------
------- ------
----- ---------------------
-------- -------- --------- ------ -
------ -------------------- - ----------- - -------------------------
-
---
--------------
------- -------
----- ----------
------- -
-------- -
------- ---------
------ -----
------ ---------------------
--
-------- -------- --------- ------ -
-- --------------
-- ---
-- ---------
------ ------------------------------ -
--------- ---------- - -----
----------- ----
-- ----- --------- -- -
-- ----- -
------ -----------
-
------ ----------------
---
-
-
---
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- --- ---------------------
---在上面的代码示例中，我们定义了一个用于显示图片的路由。在这个路由处理函数中，我们调用 reply.file() 方法来返回文件。这里需要注意的是，我们需要将图片实际存储在后端服务器上，然后才能通过浏览器访问到图片。因此我们在路由中使用了 /uploads/ 作为存储路径，让路由返回该路径下的文件。
在上传文件的路由配置中，我们在文件上传后构造了一个 HTML 页面来显示上传的图片。server.render() 是 Hapi.js 中用于渲染视图的方法。第一个参数是视图的名称，第二个参数是我们渲染视图所需的数据。在我们的示例中，我们将图片的 URL 和图片的标题传递给视图，然后根据数据渲染出来一个 HTML 页面并将页面发送给客户端。
总结
本文介绍了如何使用 Hapi.js 中的 Inert 和 Vision 插件来实现上传文件和预览图片的功能。文件上传功能主要是通过使用 hapi/boom 和 hapi/payload 两个包来实现。图片预览功能主要是通过 Inert 和 Vision 插件来实现。本文提供的代码示例可以帮助读者更好地理解 Hapi.js 的使用，也可以作为实际项目中实现文件上传和图片预览的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf5a669e06631ab9bc05dd