用multer实现图片本地上传,要注意图片存储目录是否正确
multer插件 github文档
参考文章
1.安装依赖
npm install --save multer
2.依赖版本
"express": "~4.16.1",
"multer": "^1.4.5-lts.1",
3.文件目录
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;