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

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

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

实现文件上传

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

安装相关模块

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

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

配置 multer 中间件

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

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

const multer = require('multer');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage });

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

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

编写上传路由

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

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

const express = require('express');
const router = express.Router();

const upload = require('./upload');

router.post('/upload', upload.single('file'), (req, res) => {
  res.json({ message: 'File uploaded successfully.' });
});

module.exports = router;

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

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

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

创建上传表单页面

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

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

<!DOCTYPE html>
<html>
<head>
  <title>File upload example</title>
</head>
<body>
  <form method="post" enctype="multipart/form-data" action="/upload">
    <input type="file" name="file">
    <button type="submit">Upload</button>
  </form>
</body>
</html>

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

测试文件上传

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

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

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

实现文件下载

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

编写下载路由

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

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

const express = require('express');
const router = express.Router();

router.get('/download/:filename', (req, res) => {
  const { filename } = req.params;
  const file = `./uploads/${filename}`;

  res.download(file);
});

module.exports = router;

在上面的代码中，我们定义了一个 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

阅读全文

精选内容

相关推荐

    暂无