multer实现图片上传
multer实现图片上传：
ejs代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片上传</title> </head> <body> <!-- 在终端安装：cnpm install multer Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中）的中间件。该中间件不处理multipart/form-data数据格式以外的任何形式的数据 --> <!-- 单张上传 --> <h3>单张上传</h3> <form action="/uploadImg/addimg" method="post" enctype="multipart/form-data"> <input type="file" name="img" id="img1"> <input type="submit" value="提交"> </form> <!-- 多张上传 --> <h3>多张上传</h3> <form action="/uploadImg/addimgs" method="post" enctype="multipart/form-data"> <input type="file" name="imgs" multiple id="img2"> <input type="submit" value="提交"> </form> <!-- ajax单张上传图片 --> <h3>ajax单张上传图片</h3> <input type="file" name="ajaximg" id="ajaximg"> <input type="submit" value="提交" id="ajaxbtn"> <!-- ajax多张上传图片 --> <h3>ajax多张上传图片</h3> <input type="file" name="ajaximg" multiple id="ajaximgs"> <input type="submit" value="提交" id="ajaxbtns"> </body> <script src="web/js/jquery-1.10.1.min.js"></script> <script> // ajax单张上传 $("#ajaxbtn").click(function (e) { // console.log($("#ajaximgs")[0].file[0]) let file = $("#ajaximg")[0].files[0]; let formdata = new FormData(); formdata.append("img", file); // ajax单张上传 $.ajax({ type: "POST",//默认post url: "/uploadImg/addimg",//默认当前页 data: formdata,//格式（key：value） contentType: false, processData: false, dataType: "json", beforeSend: function () { },//请求发送当前回调，常用验证 success: function (response) {//请求成功回调 alert("上传成功"); }, error: function (e) { if (e.statusText == "timeout") { alert("请求成功"); } }, // 请求成功与否都会执行的回调 complete: function () { } }); }); // ajax多张上传 $("#ajaxbtns").click(function (e) { // console.log($("#ajaximgs")[0].files) let files = $("#ajaximgs")[0].files; let formdata = new FormData(); for (const file of files) { formdata.append("imgs", file); } // ajax单张上传 $.ajax({ type: "POST",//默认post url: "/uploadImg/addimgs",//默认当前页 data: formdata,//格式（key：value） contentType: false, processData: false, dataType: "json", beforeSend: function () { },//请求发送当前回调，常用验证 success: function (response) {//请求成功回调 alert("上传成功"); }, error: function (e) { if (e.statusText == "timeout") { alert("请求成功"); } }, // 请求成功与否都会执行的回调 complete: function () { } }); }); </script> </html>
服务器代码：
// 引入模块 var express = require('express'); var fs = require("fs"); var router = express.Router(); var multer = require("multer"); // 设置上传图片的文件夹 var upload = multer({ dest: "public/uploads/" }); /* GET home page. */ router.get('/', function (req, res, next) { res.render("phone/uploadImg"); }); // .single(fieldname) // 该方法接收单个上传的文件 fieldname为上传文件所用的标签name属性。上传的文件信息存储在req.file中 // 单张上传 router.post('/addimg', upload.single("img"), function (req, res) { let file = req.file; // fieldname: 上传文件标签在表单中的name let filename = "public/uploads/" + file.filename; // 判断上传的图片格式 // mimetype：该文件的Mime type if (file.mimetype == "image/jpeg") { filename += ".jpg"; } if (file.mimetype == "image/png") { filename += ".png"; } if (file.mimetype == "image/gif") { filename += ".gif"; } fs.renameSync(file.path, filename); console.log(req.file); // 响应 res.json("上传成功"); }); // 多张图片上传 router.post('/addimgs', upload.array("imgs"), function (req, res) { let files = req.files; for (let file of files) { // fieldname: 上传文件标签在表单中的name let filename = "public/uploads/" + file.filename; // 判断上传的图片格式 // mimetype：该文件的Mime type if (file.mimetype == "image/jpeg") { filename += ".jpg"; } if (file.mimetype == "image/png") { filename += ".png"; } if (file.mimetype == "image/gif") { filename += ".gif"; } fs.renameSync(file.path, filename); } console.log(req.file); // 响应 res.json("上传成功"); }); module.exports = router;
路由接口：
var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); // 前端 // var indexRouter = require('./routes/index'); // var usersRouter = require('./routes/users'); // var IndexRouter = require('./routes/phone/index'); // var detailRouter = require('./routes/phone/detail'); // var newsShowRouter = require('./routes/phone/news-show'); // var newsRouter = require('./routes/phone/news'); // var otherListRouter = require('./routes/phone/other-list'); // var proListRouter = require('./routes/phone/pro-list'); // var tableRouter = require('./routes/phone/table'); var uploadImgRouter = require('./routes/phone/uploadImg');//图片上传路由 // 后台 var adminRouter = require('./routes/admin/index'); var adminMainRouter = require('./routes/admin/pages/main'); var adminDelRouter = require('./routes/admin/pages/article/del'); var adminIndexRouter = require('./routes/admin/pages/article/index'); var adminEditRouter = require('./routes/admin/pages/article/edit'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); // 设置public为局部变量 app.use(express.static(path.join(__dirname, 'public'))); app.use('/', indexRouter); // app.use('/users', usersRouter); // app.use('/index', IndexRouter); // app.use('/detail', detailRouter); // app.use('/newsShow', newsShowRouter); // app.use('/news', newsRouter); // app.use('/other', otherListRouter); // app.use('/pro', proListRouter); // app.use('/table', tableRouter); app.use('/uploadImg', uploadImgRouter); // 后台 // app.use('/admins', adminRouter); // app.use('/adminMain', adminMainRouter); // app.use('/adminDel', adminDelRouter); // app.use('/adminindex', adminIndexRouter); // app.use('/adminEdit', adminEditRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;
