本篇文章将介绍 Express.js 是如何处理文件上传和下载的,并提供最佳实践和示例代码。
介绍
Express.js 是 Node.js 最流行的 Web 框架之一,提供了一系列工具和中间件来处理 HTTP 请求和响应。在 Web 应用程序中,文件上传和下载是很常见的功能,例如:用户上传一个头像或者下载一个 PDF 文件。
本文将介绍 Express.js 如何处理文件上传和下载,包括以下几个方面:
- 文件上传
- 文件上传限制
- 文件上传进度条
- 文件下载
- 文件下载限制
文件上传
首先来看如何处理文件上传。在 Express.js 中,文件上传需要使用中间件 multer
。使用 multer
可以方便地处理文件的上传和存储。
首先,我们需要安装 multer
:
--- ------- ------
然后在 Express 应用程序中使用 multer
中间件:
----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ------------------- ---------------------- ------------- ---- - -- -------- --------- --------------------- ------- ---------- -- ---- -------------- -------- ---------------- --- ---------------- ---------- - ------------------- ------- -- ---- ------- ---
在上面的示例中,我们定义了一个路由 /upload
,使用了 multer
中间件来处理上传的文件。multer({ dest: 'uploads/' })
表示上传的文件将保存在 uploads/
目录下。upload.single('file')
中的 'file'
表示上传表单中的文件字段。如果没有指定这个字段,上传会失败。
现在我们可以使用 curl 来测试文件上传:
---- -- ---- -- ------------------ ---------------------
这样就上传了一个名称为 filename.txt
的文件。
文件上传限制
在实际应用中,我们需要对上传的文件设置一些限制。例如:上传文件的大小限制、文件类型限制等等。
在 multer
中,我们可以使用 limits
和 fileFilter
选项来设置文件上传限制。
----- ------ - -------- ----- ----------- ------- - --------- ---- - ---- - - -- ------- --- -- ----------- ------------- ----- --- - -- --------------------------------------------------- - ------ ------ -------------------- - -------- ------ - ---
在上面的示例中,我们设置了文件大小限制为 5MB,只允许上传图片类型的文件(jpg、jpeg、png、gif)。如果上传的文件类型不是这些类型的文件,会返回错误提示。
文件上传进度条
在上传大文件时,我们需要显示一个进度条来提示用户上传的进度。在 Express.js 中,我们可以使用 progress-stream
模块来获取上传进度。
首先安装 progress-stream
:
--- ------- ---------------
然后在文件上传函数中使用 progress-stream
:
----- -------- - --------------------------- ----- ------ - -------- ----- ---------- --- ------------------- ------------- ---- - ----- -- - ---------- ------- ------------------------------ ----- ---- -- --------- --- ----------------- ------------------ - ------------------- ----------- ---------- --- -------------------------- ---- ------------- - -- ----- - ----------------------- ------------- ------ ---------------------------------- - --------------------- ------- ---------- -------------- -------- ---------------- --- ---
在上面的示例中,我们创建了一个 progress-stream
对象 ps
,将其传递给 multer
中间件。length
表示上传文件的长度,time
表示多久输出一次进度。我们使用 ps.on('progress', function(progress) {})
来监听进度变化。
在最后的上传回调函数中,我们需要判断是否出现了错误,以及处理上传的文件。
文件下载
和文件上传类似,我们也可以在 Express.js 中处理文件下载。我们需要使用 Node.js 内置的 fs
模块来读取文件,并将读取的数据写入到响应流中。
下面是下载一个文本文件的代码示例:
----- ------- - ------------------- ----- -- - -------------- ----- ---- - ---------------- ----- --- - ---------- -------------------- ------------- ---- - ----- -------- - -------------------- -------- --------------- ----- ------ - ------------------------------ ------------------ ------------- - ----------------------- ------------- ---------------------------------- --- ----------------------- -------------- ------------------------------ ------------ ------------------------- ----------------- --- ---------------- ---------- - ------------------- ------- -- ---- ------- ---
在上面的示例中,我们定义了一个路由 /download
,读取文件 example.txt
的内容,并将其设置为响应流的数据。通过设置 Content-Disposition
头来告诉浏览器下载这个文件。
文件下载限制
和文件上传类似,我们也需要对文件下载进行限制。例如:文件下载的大小限制、文件下载的权限等等。
在 Express.js 中,我们可以使用 fs
模块读取文件之前进行限制。
-------------------- ------------- ---- - ----- -------- - -------------------- -------- --------------- -- ------------------ --- -- --------------------------- - ---- - ---- - -- - ------ --------------------------------- - -- -------------------------- -- ------------------- - ------ ----------------------------- - -- ---- ----- ------ - ------------------------------ ------------------ ------------- - ----------------------- ------------- ---------------------------------- --- ----------------------- -------------- ------------------------------ ------------ ------------------------- ----------------- ---
在上面的示例中,我们在读取文件之前判断文件大小和文件下载权限,如果超过限制或没有权限下载,返回相应的错误提示。
结论
在 Express.js 中,我们可以方便地处理文件上传和下载。使用 multer
中间件可以轻松地处理文件上传,使用 fs
模块可以轻松地处理文件下载。在实际应用中,我们需要对文件进行限制和权限判断来保证系统安全和可靠性。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67120d4dad1e889fe20262a7