express里面的文件上传功能之multer使用总结

multer 是一个 Node.js 的中间件，用于处理 multipart/form-data 类型的表单数据，这在文件上传场景中非常常见。它基于 busboy 库构建，可以轻松地与 express 框架集成。以下是如何在 Express 应用中使用 multer 进行文件上传的步骤：

1. 安装 Multer

首先，你需要通过 npm 安装 Multer。在你的项目目录中运行以下命令：

npm install multer

2. 引入 Multer 并配置

在你的 Express 应用中，引入 Multer 并根据需要进行配置。Multer 提供了多种存储选项，你可以将上传的文件保存到服务器的磁盘上，或者使用其他存储服务（如 Amazon S3）。

const express = require("express");
const multer = require("multer");
const router = express.Router();
const jwt = require("jsonwebtoken");
const path = require("path");

const jwtConfig = require("../config/index");

router.post("/login", (req, res) => {
  const { username, password } = req.body;
  if (username != "admin" && password != "123456") {
    return res.send({
      status: 1,
      msg: "登录失败",
    });
  }
  //登录成功之后，生成jwt字符串,并通过token的形式返回给客户端
  //参数:用户的信息对象，加密的秘钥，配置的对象(当前token的有效期 30s | 2h)
  const token = jwt.sign({ username: username }, jwtConfig.jwtSecret, {
    expiresIn: "30s",
  });
  res.send({
    status: 0,
    msg: "登录成功",
    token,
  });
});

router.get("/userInfo", (req, res) => {
  console.log("🚀 ~ router.get ~ req.auth:", req.auth);
  const { username } = req.auth;
  res.send({
    status: 0,
    msg: "ok",
    data: username,
  });
});

router.post("/logout", (req, res) => {
  res.send({
    status: 0,
    msg: "退出成功!!!",
  });
});
let img = "";
const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, path.join(__dirname, "../uploads/")); // 确保这个文件夹已经存在
  },
  filename(req, file, cb) {
    console.log("🚀 ~ filename ~ file:", file);
    //需要拼接文件的后缀名，以便我们返回给前端进行预览
    img =
      file.fieldname + "_" + Date.now() + "." + file.originalname.split(".")[1];
    cb(null, img);
  },
});

const upload = multer({ storage });
router.post("/upload", upload.single("myFile"), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send({
      status: 1,
      message: "no file uploaded.",
    });
  }
  res.send({
    status: 0,
    msg: "上传成功!!!",
    data: img,
  });
});

let imgArrs = [];
router.post(
  "/uploads",
  upload.array("filelist", 2),
  function (req, res, next) {
    const files = req.files;
    if (!files.length) {
      return res.status(400).send({
        status: 1,
        message: "no file uploaded.",
      });
    }
    files.forEach((file) => {
      imgArrs.push(file.filename);
    });
    res.send({
      status: 0,
      msg: "上传成功!!!",
      data: imgArrs,
    });
  },
  function (err, req, res, next) {}
);

module.exports = router;

在上面的代码中，我们定义了一个 diskStorage 存储引擎，它指定了文件的保存位置和文件名。upload.single('file') 告诉 Multer 期待一个名为 ‘file’ 的字段包含上传的文件。

3. 处理上传的文件

当用户通过表单上传文件时，Multer 会自动处理文件并将文件信息添加到请求对象（req）中。你可以访问 req.file 来获取上传文件的信息，如文件名、路径等。

4. 设置表单

在你的前端页面中，你需要设置一个 multipart/form-data 类型的表单，并包含一个文件输入字段。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

确保 enctype 属性设置为 multipart/form-data，这样表单才能正确地传输文件数据。

5. 处理错误

在上传文件的过程中，可能会发生错误，如文件大小超过限制、文件类型不被允许等。你可以通过监听 error 事件来处理这些错误。

app.post('/upload', upload.single('file'), (req, res) => {
  if (req.file) {
    // 文件上传成功
    res.send(`File uploaded successfully: ${req.file.filename}`);
  } else if (req.err) {
    // 处理错误
    res.status(500).send('File upload failed');
  }
});

在上面的代码中，如果 req.file 不存在，但存在 req.err，则表示上传过程中出现了错误。

6. 自定义验证

你还可以使用 Multer 提供的 limits 选项来设置文件大小限制、文件数量限制等。

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 5 // 限制文件大小为 5MB
  }
});

通过以上步骤，你可以在 Express 应用中轻松实现文件上传功能。Multer 提供了灵活的配置选项，可以满足各种不同的文件上传需求。

postman验证

• 单个文件上传
  
  在看我们的服务端文件夹，文件已经在upload文件夹下
  

浏览器预览成功

• 多个文件上传
  
  文件已经在服务端upload文件夹
  

注意

上传功能是在之前的项目文件的基础上进行的，这里有个小细节需要注意，就是当我们找不到图片的时候，网页预览会显示token的问题，一般我们的图片是不需要token就能预览那该怎么处理呢？

//安装的express-jwt模块会默认为最新版本，更新后的jwt需要在配置中加入algorithms属性，即设置jwt的算法。一般HS256为配置algorithms的默认值。
app.use(
  expressjwt({ secret: jwtConfig.jwtSecret, algorithms: ["HS256"] }).unless({
    path: [/^\/(api|images)\/| /],
  })
);

在鉴权的时候我们要把images请求的路由放行。改造上面代码即可

但是，如果你的图片的确是需要登录才展示，就无需修改了。