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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM