Express.js 中使用 Multer 进行文件上传-JavaScript中文网-JavaScript教程资源分享门户

表单上传文件是 Web 开发中常见的需求。在 Node.js 开发中，我们可以使用 Multer 模块来实现文件上传功能。Multer 是一个 Node.js 中间件，用于处理 multipart/form-data 类型的表单数据，也就是可以用来上传文件。在 Express.js 的应用中，我们可以方便地使用 Multer 模块来实现文件上传功能。

安装 Multer

在使用 Multer 之前，我们需要先安装它。我们可以使用 npm 命令来安装 Multer 模块。打开命令行窗口并执行以下命令：

npm install --save multer

这将会在当前项目中安装 Multer 模块，并将其添加到 package.json 文件中。

使用 Multer 进行文件上传

在 Express.js 应用中使用 Multer 进行文件上传需要进行以下几个步骤：

引入 Multer 模块。
创建一个 Multer 实例。
配置 Multer，包括上传文件的存储路径和文件名的格式等。
创建一个路由处理程序来处理上传请求。
在路由处理程序中调用 Multer 实例的 single() 或 array() 方法来处理上传文件的请求。

引入 Multer 模块

首先，我们需要在 Express.js 应用中引入 Multer 模块。在应用程序的顶层代码中添加以下代码：

const multer = require('multer');

创建一个 Multer 实例

Multer 可以通过以下几个选项进行配置：

storage: 文件存储路径和选项。
limits: 文件大小限制。
fileFilter: 文件过滤选项。

下面是一个基本的 Multer 配置示例：

// javascriptcn.com 代码示例
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 指定存储路径
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    // 指定文件名
    cb(null, file.fieldname + '-' + Date.now())
  }
});

const upload = multer({
  storage: storage,
  limits: {
    fieldSize: 1024 * 1024 * 5 // 限制文件大小为 5MB
  },
  fileFilter: function (req, file, cb) {
    // 过滤文件类型为 image/png，如果上传了其他类型的文件则报错
    if (file.mimetype !== 'image/png') {
      cb(new Error('上传的文件必须为 image/png 类型。'), false);
    } else {
      cb(null, true);
    }
  }
});

上面的代码中，destination 指定了文件存储路径，filename 指定了上传的文件名，并添加了时间戳防止文件名冲突。limits 限制了上传文件的大小，这里限制为 5MB。fileFilter 指定了上传文件的类型为 image/png 类型。

创建一个路由处理程序

接下来，我们需要创建一个路由处理程序来处理上传文件请求。在 Express.js 中，路由处理程序是一个函数，它负责处理请求并返回响应。以下是一个处理上传文件请求的示例代码：

app.post('/upload', upload.single('file'), function (req, res, next) {
  console.log(req.file); // 输出上传的文件信息
  res.send('文件上传成功！');
});

上面的路由处理程序使用了 Multer 实例的 single() 方法，它指定了请求中单个文件的字段名为 file。如果上传的是多个文件，可以使用 array() 方法，它指定了请求中多个文件的字段名。upload.single('file') 中的 file 对应了表单中的字段名，它可以自己定义或者从表单元素中获取。

示例代码

以下是一个完整的上传图片的示例代码，你可以根据这个示例进行学习和实践：

// javascriptcn.com 代码示例
const express = require('express');
const multer = require('multer');

const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 指定存储路径
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    // 指定文件名
    cb(null, file.fieldname + '-' + Date.now())
  }
});

const upload = multer({
  storage: storage,
  limits: {
    fieldSize: 1024 * 1024 * 5 // 限制文件大小为 5MB
  },
  fileFilter: function (req, file, cb) {
    // 过滤文件类型为 image/png，如果上传了其他类型的文件则报错
    if (file.mimetype !== 'image/png') {
      cb(new Error('上传的文件必须为 image/png 类型。'), false);
    } else {
      cb(null, true);
    }
  }
});

app.post('/upload', upload.single('file'), function (req, res, next) {
  console.log(req.file); // 输出上传的文件信息
  res.send('文件上传成功！');
});

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

总结

在 Express.js 应用中使用 Multer 进行文件上传是非常方便的。在使用 Multer 时需要注意安装模块并且进行配置，最后在路由处理程序中调用 Multer 实例的方法来处理上传请求。在实际开发中，我们还需要注意文件大小、格式和类型等限制，在上传文件时需要进行校验和处理。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653b225b7d4982a6eb5752e2