nodejs express multer 上传图片

作者: adm 分类: node 发布时间: 2023-03-20

安装依赖

npm install --save multer

multerConfig.js

// 1. 引入依赖
const multer = require("multer");
const md5 = require("md5");
const fs = require("fs");
// 2. 引入工具
const path = require("path"); //

const imgPath = "/uploads/images/" // 上传到服务器的虚拟目录

const resolve = (dir) => {
  return path.join(__dirname, "./", dir);
};
const toTwoDigits = (num) => (num > 9 ? `${num}` : `0${num}`);
function today() {
  const date = new Date();
  const array = [date.getFullYear(), date.getMonth() + 1];
  return array.map((i) => toTwoDigits(i)).join("");
}
//递归创建文件夹
function mkdirs(pathname, callback) {
  // 需要判断是否是绝对路径(避免不必要的 bug)
  pathname = path.isAbsolute(pathname)
    ? pathname
    : path.join(__dirname, pathname);

  // 获取相对路径
  pathname = path.relative(__dirname, pathname);

  // path.sep 避免平台差异带来的 bug
  const floders = pathname.split(path.sep);

  let pre = ""; // 最终用来拼合的路径
  floders.forEach((floder) => {
    try {
      // 没有异常,文件已经创建,提示用户该文件已经创建
      const _stat = fs.statSync(path.join(__dirname, pre, floder));
      const hasMkdir = _stat && _stat.isDirectory();
      if (hasMkdir) {
        //console.log(`文件${floder}已经存在,不能重复创建,请重新创建!`)
        callback; // && callback(`文件${floder}已经存在,不能重复创建,请重新创建!`)
      }
    } catch (err) {
      // 抛出异常,文件不存在则创建文件
      try {
        // 避免父文件还没有创建的时候,先创建子文件所出现的意外 bug,这里选择同步创建文件
        fs.mkdirSync(path.join(__dirname, pre, floder));
        callback && callback(null);
      } catch (error) {
        callback && callback(error);
      }
    }
    pre = path.join(pre, floder); // 路径拼合
  });
}

// 3. multer的配置对象
let storage = multer.diskStorage({
  // 3.1 存储路径
  destination: function (req, file, cb) {
    let p = path.join("../public"+imgPath, today());
    mkdirs(p);
    // 3.1.1 允许图片上传
    if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
      cb(null, resolve("../public"));
    } else {
      // 3.1.2 限制其他文件上传类型
      cb({ error: "Mime type not supported" });
    }
  },
  //  3.2 存储名称
  filename: function (req, file, cb) {
    let fileFormat = file.originalname.split(".");
    cb(
      null,
      imgPath+today() + "/" + md5(+new Date()) + "." + fileFormat[fileFormat.length - 1]
    );
  },
});

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

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

service upload.js


// 1. 引入配置好的multerConfig
const multerConfig = require('../config/multerConfig');
const {hostname,port} = require('../config/host');
// 2. 定义静态变量
const fileName = "file"  // 上传的 fileName 名称
const updateBaseUrl = `http://${hostname}:${port}` // 上传到服务器地址





// 上传接口的 请求参数req  响应参数res
function upload(req, res) {
    return new Promise((resolve, reject) => {
        multerConfig.single(fileName)(req, res, function (err) {
            if (err) {
                console.log(err)
                reject(err)
            } else {
                // `req.file.filename`  请求文件名称后缀 
                
                console.log(req.file.filename)
                resolve(  req.file.filename)
            }
        });
    })
}

module.exports = upload;

router.js

const express = require('express')
const upload = require('../../service/upload.js');
const router = express.Router()
const response = require("../../config/response");
const Api = new response();
// 上传图片接口
router.post('/uploadImage', (req, res) => {
    upload(req, res).then(imgsrc => {
      // 上传成功 存储文件路径 到数据库中
      let data={
        imgsrc:imgsrc
      }
      return res.json(Api.OK(data));
       
    }).catch(err => {
        return res.json(Api.error( err.error));
      
    })
  })
  
  
  
  module.exports = router

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!