express+multer实现图片上传(本地)

217 阅读1分钟

用multer实现图片本地上传,要注意图片存储目录是否正确
multer插件 github文档
参考文章

1.安装依赖

npm install --save multer

2.依赖版本

"express": "~4.16.1",
"multer": "^1.4.5-lts.1",

3.文件目录

image.png

4.功能实现

multerConfig.js

// 1. 引入依赖
const multer = require("multer");

// 2. 引入工具
const path = require("path"); //
const resolve = (dir) => {
  return path.join(__dirname, "./", dir);
};

// 3. multer的配置对象
let storage = multer.diskStorage({
  // 3.1 存储路径
  destination: function (req, file, cb) {
    // 3.1.1 允许图片上传
    if (
      file.mimetype === "image/jpeg" ||
      file.mimetype === "image/jpg" ||
      file.mimetype === "image/png"
    ) {
      cb(null, resolve("../public/images"));
    } else {
      // 3.1.2 限制其他文件上传类型
      cb({ error: "Mime type not supported" });
    }
  },
  //  3.2 存储名称
  filename: function (req, file, cb) {
    let fileFormat = file.originalname.split(".");
    let DateNow = Date.now().toString();
    // 不会重复的图片文件名
    cb(
      null,
      "zhangliang_" +
        Math.floor(Math.random() * 10000) +
        "_" +
        DateNow.substring(DateNow.length - 6, DateNow.length) +
        "." +
        fileFormat[fileFormat.length - 1]
    );
  },
});

// 4. 添加配置
const multerConfig = multer({
  storage,
});

// 5. 导出配置好的multerConfig
module.exports = multerConfig;


upload.js

// 1. 引入配置好的multerConfig
const multerConfig = require("../config/multerConfig");

// 2. 定义静态变量
const fileName = "img"; // 上传的 fileName 名称
const updateBaseUrl = "http://localhost:8888"; // 上传到服务器地址
const imgPath = "/img/images/"; // 上传到服务器的虚拟目录

// 上传接口的 请求参数req  响应参数res
function upload(req, res) {
  return new Promise((resolve, reject) => {
    multerConfig.single(fileName)(req, res, function (err) {
      if (err) {
        reject(err);
      } else {
        resolve(updateBaseUrl + imgPath + req.file.filename); //完整的服务器虚拟目录
      }
    });
  });
}

module.exports = upload;


uploadApi.js

var express = require("express");
var router = express.Router();
const upload = require("../utils/upload");
router.post("/uploadImage", function (req, res, next) {
  upload(req, res)
    .then((uploadRes) => {
      res.send({
        code: "200",
        message: "上传成功",
        data: {
          url: uploadRes,
        },
      });
    })
    .catch((err) => {
      res.send({
        code: "-1",
        message: "上传失败",
      });
    });
});

module.exports = router;