multer 实现图片上传
首先必须配置multer,新建multer.js(我是在router目录下新建的)
//上传图片 //引进multer模块 记得在终端安装multer模块 const multer = require('multer') 开始配置 const storage = multer.diskStorage({ //上传图片的路径,是在你的静态目录下(public)uploads会自动进行创建 destination: 'public/uploads', //给上传文件重命名,获取添加后缀名 filename: function(req, file, callback){ //在这里我是把图片命名为我当前登陆的用户名 var user = req.session.user; callback(null, `${user.name}.jpg`); } }) //导出模块 module.exports = multer({storage})
然后使用在router目录下的index.js上引进 var uploads=require('./multer');
//*****************上传图片********************* app.get('/user/photo',checkLogin) app.get('/user/photo',function(req,res){ res.render('photo',{ title:'发表', user:req.session.user, success:req.flash('success').toString(), error:req.flash('error').toString() }) }) app.post('/user/photo',checkLogin); app.post('/user/photo',uploads.single('photo'),function(req,res,next){ req.flash('success','上传成功'); res.redirect('/') })
新建photo.ejs
<%- include header %> <h1><%= user.name %></h1> <form action="/user/photo" method="post" enctype="multipart/form-data"> <div class="form-group"> <input type="file" name="photo" required accept=".jpg,.png"/> </div> <input type="submit" class="btn btn-success form-control" value="上传"/> </form> <%- include footer %>
然后你会发现你的uploads目录下会有你上传的图片,如果让他显示出来 ,只需要给img的src属性设置他的路径即可。语言组织能力不是很强,可是很实用,哈哈