在现代 Web 应用中,文件上传和下载是非常常见的功能之一。Express.js 是一个常用的 Node.js Web 框架,可以非常便捷地实现文件上传和下载功能。
在本篇文章中,我们将详细介绍如何利用 Express.js 实现文件上传和下载,并提供相应的示例代码。通过本文的学习,你将了解到如何使用 Express.js 提供的中间件和模块,以及如何处理文件流和路由请求。
实现文件上传
首先让我们看一下如何利用 Express.js 实现文件上传。
安装相关模块
在开始编写代码之前,我们需要安装 multer
模块,用于处理文件上传。
可以通过以下命令进行安装:
npm install multer
配置 multer 中间件
在使用 multer
处理文件上传时,我们需要使用其提供的中间件。
在 Express.js 中,可以使用以下代码配置 multer
中间件:
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------- - -------------------- ------------ ----- ----- --- -- - -------- ------------ -- --------- ----- ----- --- -- - -------- ------------------- -- --- ----- ------ - -------- ------- ---
以上代码定义了一个名为 upload
的中间件,用于处理文件上传。其中 storage
是一个对象,用于配置文件上传的存储路径和文件名。
在上面的代码中,我们指定了上传文件的存储路径为 uploads/
目录,并将文件名设置为上传时的原始文件名。
编写上传路由
当 multer
中间件配置好之后,我们需要编写上传文件的路由。
以下是一个简单的文件上传路由示例:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ----------------- ----- ------ - -------------------- ---------------------- ---------------------- ----- ---- -- - ---------- -------- ----- -------- -------------- --- --- -------------- - -------
在上面的代码中,我们定义了一个 POST 方法的 /upload
路由,用于处理用户上传的文件。
这里我们调用了之前配置的 multer
中间件,并设置了上传的文件字段为 file
。
当上传成功后,我们返回一个 JSON 格式的响应,告诉用户文件上传成功。
创建上传表单页面
为了测试文件上传功能,我们需要创建一个简单的 HTML 页面用于上传文件。
以下是一个示例上传表单页面的代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ------ --------------- ------- ------ ----- ------------- ----------------------------- ----------------- ------ ----------- ------------ ------- ----------------------------- ------- ------- -------
在上面的代码中,我们创建了一个表单,用于让用户选择要上传的文件。在表单中需要设置 enctype
属性为 multipart/form-data
,这样浏览器才能正确地解析文件上传的数据。
测试文件上传
现在,我们已经配置好了文件上传的相关代码,但还需要启动服务器并测试一下是否生效。
我们可以通过以下命令启动服务器:
node server.js
然后在浏览器中访问上传表单页面,选择一个文件并上传。如果文件上传成功,则会看到一个消息提示 File uploaded successfully.
。
实现文件下载
除了文件上传,利用 Express.js 还可以非常方便地实现文件下载功能。
编写下载路由
与文件上传类似,我们需要编写一个路由用于响应用户的文件下载请求。
以下是一个简单的文件下载路由示例:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ----------------- --------------------------------- ----- ---- -- - ----- - -------- - - ----------- ----- ---- - ------------------------ ------------------- --- -------------- - -------
在上面的代码中,我们定义了一个 GET 方法的 /download/:filename
路由,用于响应用户的文件下载请求。其中 :filename
是一个路由参数,用于指定要下载的文件名。
在路由处理函数中,我们首先通过 req.params
获取到用户请求中指定的文件名,然后将文件所在路径拼接出来。
最后我们使用 res.download()
方法将文件数据发送给用户端,让用户下载该文件。
测试文件下载
现在,我们已经编写好了文件下载的相关代码,同样需要启动服务器并测试是否生效。
我们可以通过以下命令启动服务器:
node server.js
然后在浏览器中访问 http://localhost:3000/download/filename
,其中 filename
是要下载的文件名。如果一切正常,则会弹出文件下载对话框,用于让用户保存文件。
总结
通过本文的学习,你已经了解到如何利用 Express.js 实现文件上传和下载功能。在实现过程中,我们使用了 multer
中间件和路由参数,并分别编写了文件上传和文件下载的路由和示例代码。
当你需要在你的 Web 应用中添加文件上传和下载功能时,可以借鉴本文中提供的代码,并进行相应的修改和优化。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65abc8fdadd4f0e0ff5726e2