在前端开发中，文件上传和下载是比较常见的功能。Fastify 是一个快速、低开销且可扩展的 Node.js Web 框架，它提供了很好的插件系统和路由系统，可以帮助我们轻松地实现文件上传和下载功能。
在本文中，我们将介绍如何使用 Fastify 框架实现文件上传和下载功能，并提供示例代码。
实现文件上传功能
安装依赖
在开始之前，我们需要安装一些依赖，包括：
- fastify：Fastify 框架本身
- fastify-multipart：用于解析 multipart/form-data 格式的请求体
- fastify-static：用于提供静态文件服务
可以使用以下命令进行安装：
--- ------- ------- ----------------- --------------
实现上传接口
接下来，我们需要实现一个上传接口。在 Fastify 中，可以使用 fastify.post() 方法来创建一个 POST 请求的路由。
----- ------- - --------------------- ----- ---- - ---------------- ----------------------------------------------- ----------------------- ----- --------- ------ -- - ----- ---- - ----- --------------- ----- -------- - -------------- ----- -------- - -------------------- ------------------------- ----- ------------------------------------------ ------------ -------- ----- -------- ----- --------- --- --- -------------------- --- -- - -- ----- ----- ---- ------------------- --------- -- ------------------------ ---
在上面的代码中，我们使用 fastify.post() 方法创建了一个 /upload 的路由。当用户发起 POST 请求时，Fastify 会自动解析请求体中的 multipart/form-data 格式的数据，并将文件信息存储在 request.file() 对象中。
我们使用 fs.createWriteStream() 方法将文件保存到本地的 ./uploads 目录下，并通过 reply.send() 方法返回上传成功的消息。
测试上传接口
现在我们可以使用 Postman 等工具测试上传接口了。在请求体中选择一个文件并将请求方法设置为 POST，将请求 URL 设置为 http://localhost:3000/upload，然后发送请求。
如果一切正常，你应该会收到一个上传成功的消息，并且文件会被保存在 ./uploads 目录下。
实现文件下载功能
实现下载接口
接下来，我们将实现一个文件下载接口。在 Fastify 中，可以使用 fastify.get() 方法来创建一个 GET 请求的路由。
---------------------------------- ----- --------- ------ -- - ----- -------- - -------------------- ---------------------------------------- ---------------------------------------------------------- ---
在上面的代码中，我们使用 fastify.get() 方法创建了一个 /download/:filename 的路由。当用户发起 GET 请求时，Fastify 会自动从 URL 中获取文件名并将其存储在 request.params.filename 对象中。
我们使用 reply.type() 方法设置返回的 MIME 类型为 application/octet-stream，这是一种通用的二进制数据类型。然后使用 reply.sendFile() 方法将文件发送给客户端。
测试下载接口
现在我们可以使用浏览器或其他工具测试下载接口了。在浏览器中输入 http://localhost:3000/download/filename.pdf，将文件名替换为你要下载的文件名，然后按下回车键。
如果一切正常，你应该会看到浏览器开始下载文件，并将其保存到本地。
实现文件上传和下载的前端页面
最后，我们可以将文件上传和下载的功能集成到一个前端页面中。以下是一个简单的示例代码：
--------- -----
------
------
----- ----------------
----------- ------ --- ----------------
-------
------
-------- ------ --- -------------
----- -----------------
------ ----------- ------------
------- -----------------------------
-------
----
------------ ----------
--- --------------------
--------
----- -------- - -------------------------------------
---------------
-------------- -- ----------------
---------- -- -
----------------- -- -
----- -- - -----------------------------
----- ---- - ----------------------------
--------- - --------------------
-------------- - -----
---------------------
-------------------------
---
---
----- ---------- - ---------------------------------------
------------------------------------- ----- -- -
-----------------------
----- -------- - --- ---------------------
---------------- -
------- -------
----- --------
--
-------------- -- ----------------
---------- -- -
--------------------
-------------------
---
---
---------
-------
-------在上面的代码中，我们创建了一个简单的 HTML 页面，其中包含一个文件上传表单和一个文件下载列表。我们使用 fetch API 发送 GET 请求获取服务器上的文件列表，并将其显示在页面上。
在上传表单中，我们使用 FormData 对象将文件数据包装成一个表单对象，并将其发送给服务器。当服务器返回成功的响应时，我们弹出一个提示框并重置表单。
总结
在本文中，我们介绍了如何使用 Fastify 框架实现文件上传和下载功能，并提供了示例代码。希望这篇文章能够帮助你学习和使用 Fastify 框架，以及实现文件上传和下载功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/662d1342d3423812e4a9a41a