利用 Express.js 实现文件上传和下载教程

阅读时长 5 分钟读完

在现代 Web 应用中,文件上传和下载是非常常见的功能之一。Express.js 是一个常用的 Node.js Web 框架,可以非常便捷地实现文件上传和下载功能。

在本篇文章中,我们将详细介绍如何利用 Express.js 实现文件上传和下载,并提供相应的示例代码。通过本文的学习,你将了解到如何使用 Express.js 提供的中间件和模块,以及如何处理文件流和路由请求。

实现文件上传

首先让我们看一下如何利用 Express.js 实现文件上传。

安装相关模块

在开始编写代码之前,我们需要安装 multer 模块,用于处理文件上传。

可以通过以下命令进行安装:

配置 multer 中间件

在使用 multer 处理文件上传时,我们需要使用其提供的中间件。

在 Express.js 中,可以使用以下代码配置 multer 中间件:

-- -------------------- ---- -------
----- ------ - ------------------

----- ------- - --------------------
  ------------ ----- ----- --- -- -
    -------- ------------
  --
  --------- ----- ----- --- -- -
    -------- -------------------
  --
---

----- ------ - -------- ------- ---

以上代码定义了一个名为 upload 的中间件,用于处理文件上传。其中 storage 是一个对象,用于配置文件上传的存储路径和文件名。

在上面的代码中,我们指定了上传文件的存储路径为 uploads/ 目录,并将文件名设置为上传时的原始文件名。

编写上传路由

multer 中间件配置好之后,我们需要编写上传文件的路由。

以下是一个简单的文件上传路由示例:

-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------

----- ------ - --------------------

---------------------- ---------------------- ----- ---- -- -
  ---------- -------- ----- -------- -------------- ---
---

-------------- - -------

在上面的代码中,我们定义了一个 POST 方法的 /upload 路由,用于处理用户上传的文件。

这里我们调用了之前配置的 multer 中间件,并设置了上传的文件字段为 file

当上传成功后,我们返回一个 JSON 格式的响应,告诉用户文件上传成功。

创建上传表单页面

为了测试文件上传功能,我们需要创建一个简单的 HTML 页面用于上传文件。

以下是一个示例上传表单页面的代码:

-- -------------------- ---- -------
--------- -----
------
------
  ----------- ------ ---------------
-------
------
  ----- ------------- ----------------------------- -----------------
    ------ ----------- ------------
    ------- -----------------------------
  -------
-------
-------

在上面的代码中,我们创建了一个表单,用于让用户选择要上传的文件。在表单中需要设置 enctype 属性为 multipart/form-data,这样浏览器才能正确地解析文件上传的数据。

测试文件上传

现在,我们已经配置好了文件上传的相关代码,但还需要启动服务器并测试一下是否生效。

我们可以通过以下命令启动服务器:

然后在浏览器中访问上传表单页面,选择一个文件并上传。如果文件上传成功,则会看到一个消息提示 File uploaded successfully.

实现文件下载

除了文件上传,利用 Express.js 还可以非常方便地实现文件下载功能。

编写下载路由

与文件上传类似,我们需要编写一个路由用于响应用户的文件下载请求。

以下是一个简单的文件下载路由示例:

-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------

--------------------------------- ----- ---- -- -
  ----- - -------- - - -----------
  ----- ---- - ------------------------

  -------------------
---

-------------- - -------

在上面的代码中,我们定义了一个 GET 方法的 /download/:filename 路由,用于响应用户的文件下载请求。其中 :filename 是一个路由参数,用于指定要下载的文件名。

在路由处理函数中,我们首先通过 req.params 获取到用户请求中指定的文件名,然后将文件所在路径拼接出来。

最后我们使用 res.download() 方法将文件数据发送给用户端,让用户下载该文件。

测试文件下载

现在,我们已经编写好了文件下载的相关代码,同样需要启动服务器并测试是否生效。

我们可以通过以下命令启动服务器:

然后在浏览器中访问 http://localhost:3000/download/filename,其中 filename 是要下载的文件名。如果一切正常,则会弹出文件下载对话框,用于让用户保存文件。

总结

通过本文的学习,你已经了解到如何利用 Express.js 实现文件上传和下载功能。在实现过程中,我们使用了 multer 中间件和路由参数,并分别编写了文件上传和文件下载的路由和示例代码。

当你需要在你的 Web 应用中添加文件上传和下载功能时,可以借鉴本文中提供的代码,并进行相应的修改和优化。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65abc8fdadd4f0e0ff5726e2

纠错
反馈