nodejs express multer 上传图片
安装依赖
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

