在构建现代 Web 应用程序时，RESTful API 已成为流行的 API 设计约定。REST（表示状态转移）是设计 Web 应用程序的一种风格和约定，它包括 URL，HTTP 方法和响应的规范格式。文件上传和下载是许多 Web 应用程序的重要组成部分，因此实现这些功能必不可少。在本文中，我们将介绍如何在 RESTful API 中实现文件上传和下载。
文件上传
通常，文件上传涉及从客户端向服务器发送文件。实现文件上传的两种常见方法是通过 POST 请求或 PUT 请求。在我们的例子中，我们将展示使用 POST 方法。
前端实现
在前端，我们可以使用 HTML 的表单元素来完成文件上传。我们需要使用 enctype 属性设置表单类型为 “multipart/form-data”，这将使表单传递二进制文件数据。使用 input 元素的 type='file' 属性，我们可以打开操作系统的文件对话框，选择要上传的文件。
在表单提交时，我们通过 fetch API 将数据发送到服务器。fetch API 是一个现代的 JavaScript API，用于在 Web 应用程序中获取资源和提交数据。在下面的示例代码中，我们将通过 FormData API 创建一个 FormData 对象，并使用 fetch API 发送表单数据。
-- -------------------- ---- -------
----- ----------------------------- --------------
------ ----------- ----------- --
------- -------------------- -------------
-------
--------
----- ---- - -------------------------------
------------------------------- ------- -- -
-----------------------
----- -------- - --- ---------------
------------------- -
------- -------
----- --------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------
---
---------后端实现
在后端，我们需要解析上传的文件并将其保存到服务器磁盘上。我们可以使用 Node.js 的 multer 中间件来解析文件上传请求。multer 中间件为我们提供了一个简单的接口，可以轻松地处理文件上传请求。在下面的示例代码中，我们将通过 Express.js 框架和 multer 中间件实现文件上传。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ---------------------- ---------------------- ----- ---- -- - ---------- -------- ----- -------- -------------- --- --- ---------------- -- -- ------------------- ------- -- ---- ---------
在上面的示例代码中，upload.single('file') 函数将解析上传的单个文件并将其保存到指定的目录下。在这个例子中，我们将文件保存到 “uploads/” 目录下。
文件下载
文件下载涉及从服务器向客户端传输文件。在 RESTful API 中，我们可以使用 GET 请求来实现文件下载。
前端实现
在前端，我们可以使用 fetch API 和 Blob() 构造函数来下载文件。fetch API 允许我们获取数据并返回一个 Response 对象，而 Blob() 构造函数则接受一个数组（通常是 Uint8Array 类型的数组）作为参数，并将其转换为二进制文件。
在下面的示例代码中，我们将使用 fetch() 函数获取服务器上的文件，并使用 Blob() 构造函数将其转换为二进制数据。最后，我们将使用 URL.createObjectURL() 函数创建一个可下载的 URL，并在客户端创建一个下载链接。
-- -------------------- ---- -------
-- -------- ----------------- --------
--------
----- ------------ - ----------------------------
------------------------------
-------------- -- -----------------------
------------ -- -
----- ---- - --- -------------- - ----- ------------ ---
----- --- - --------------------------
----------------- - ----
--
------------ -- ----------------------
---------后端实现
在后端，我们需要将文件内容发送回响应。在下面的示例代码中，我们使用 Express.js 框架和 fs 模块读取文件内容，并将其发送回响应。在响应头中，我们还将设置 “Content-Disposition” 标头，以使浏览器将文件保存到本地磁盘上。
-- -------------------- ---- -------
----- ------- - -------------------
----- -- - --------------
----- --- - ----------
------------------------------- ----- ---- -- -
----- - -------- - - -----------
---------------------------------- ------- ----- -- -
-- ------- -
----------------------------
-------
-
------------------------------------ ------------ -----------------------
---------------
---
---
---------------- -- -- ------------------- ------- -- ---- ---------在上述示例中，“Content-Disposition” 标头设置为 “attachment; filename=myfile.txt”，这将告诉浏览器将文件保存到本地磁盘上，并将文件名设置为 “myfile.txt”。
结论
文件上传和下载是许多 Web 应用程序的核心要素。在使用 RESTful API 构建应用程序时，了解如何实现这些功能是至关重要的。在本文中，我们学习了如何使用 fetch API 和 multer 中间件实现文件上传，以及如何使用 fetch API 和 fs 模块实现文件下载。当你构建 RESTful API 时，你可以使用这些技术来实现文件上传和下载，并为你的用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67447280c1a23897ea76be50