Nodejs进阶：基于express+multer的文件上传实例

下面我将介绍一下“Nodejs进阶：基于express+multer的文件上传实例”的完整攻略。

简介

在Web应用程序开发中，文件上传是一个非常常见的需求。Node.js 提供了强大的文件系统模块，可以轻松读取和写入文件。而 Express 框架则提供了处理 HTTP 请求和响应的能力。 Multer 是一款 Node.js 中用于处理 multipart/form-data 类型数据的中间件，它可以处理文件上传和表单数据。

本例子主要使用 Node.js、Express 框架和 Multer 中间件来实现一个文件上传的功能。

前置条件

在开始之前，确保你已经安装了 Node.js 环境，以及在你的项目中安装了 Express 和 multer 模块。

实现步骤

1. 创建表单

让我们首先创建一个包含文件上传字段的 HTML 表单：

<!doctype html>
<html>
  <head>
    <title>文件上传示例</title>
  </head>
  <body>
    <h1>文件上传示例</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="photo"/>
      <input type="submit" value="上传"/>
    </form>
  </body>
</html>

2. 创建 Express 应用程序

首先，我们需要创建一个 Express 应用程序。在项目根目录下创建一个名为 app.js 的文件，并添加以下内容：

const express = require("express");
const app = express();

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false }));

app.get("/", function (req, res) {
  res.render("index");
});

app.listen(3000, function () {
  console.log("服务器已启动");
});

在这里，我们使用 express 模块创建了一个 Express 应用程序。我们还使用了 ejs 模板来渲染页面。

这里的 app.get() 函数创建了一个路由，该路由将根路径 / 映射到 index.ejs 视图。在这个视图中，我们将展示刚才创建的表单。

最后，我们使用 app.listen() 函数在端口号 3000 启动了我们的服务器。

3. 处理文件上传请求

现在，我们需要为处理文件上传请求添加路由。我们还需要在 Express 中使用 Multer 中间件来解析上传的文件。

首先，我们需要在 app.js 中添加以下代码：

const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads/");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + file.originalname);
  },
});

const upload = multer({storage: storage});

app.post("/upload", upload.single("photo"), function (req, res) {
  res.send("文件上传成功");
});

在这里，我们首先引入了 Multer 中间件。然后，我们通过 multer.diskStorage() 函数配置了文件存储的方式。

存储路径使用了 uploads/，这意味着上传的文件将保存在项目根目录下的 uploads 文件夹中。

文件名使用了当前时间戳加上原始文件名。

接着，我们使用 multer() 函数创建了 Multer 中间件的实例，并传入了我们之前配置好的存储方式。

最后，我们使用 app.post() 函数创建了一个路由，它将上传请求映射到一个处理函数。在这里，我们使用了 Multer 中间件的 single() 函数来解析上传的文件字段 photo，并将上传的文件存储到我们之前指定的 uploads 文件夹中。

该路由处理函数收到上传的文件后，将响应一个简单的成功消息。

4. 显示上传成功信息

向上传成功的消息展示在客户端，需要我们修改 index.ejs 视图：

<!doctype html>
<html>
  <head>
    <title>文件上传示例</title>
  </head>
  <body>
    <h1>文件上传示例</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="photo"/>
      <input type="submit" value="上传"/>
    </form>

    <% if(message) { %>
      <p><%= message %></p>
    <% } %>
  </body>
</html>

在这里，我们添加了一个条件语句，用于展示上传成功的消息。在视图中添加一个名为 message 的变量，它的值就是服务器返回的成功消息。

现在，我们重新启动服务器，访问 http://localhost:3000/，就可以看到上传表单了。

示例说明

在这个示例中，我们创建了一个简单的文件上传应用程序，并实现了其基本功能。在处理文件上传请求时，我们使用了 Multer 中间件，并配置了其存储方式和文件名。最后，我们将上传成功的消息展示在了客户端。

下面给出两条示例说明：

如果要修改文件存储的路径怎么做？

答：只需要修改 multer.diskStorage() 函数中的 destination 属性即可，例如将其改为 cb(null, "/path/to/uploads/")。

如果需要限制上传文件的类型，怎么做？

答：在 multer() 函数中，添加 fileFilter 属性即可，例如：

const upload = multer({
  storage: storage,
  fileFilter: function (req, file, cb) {
    if (file.mimetype !== "image/png") {
      return cb(null, false);
    }
    cb(null, true);
  },
});

在这里，我们添加了一个名为 fileFilter 的属性，其值是一个函数。这个函数用于判断上传文件的类型是否为 PNG 格式。如果不是，将调用回调函数的第一个参数（即错误），否则将调用回调函数的第二个参数（即成功）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Nodejs进阶：基于express+multer的文件上传实例 - Python技术站