首先必須配置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屬性設置他的路徑即可。語言組織能力不是很強,可是很實用,哈哈