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