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属性设置他的路径即可。语言组织能力不是很强，可是很实用，哈哈

 

转载于:https://www.cnblogs.com/athean/p/6800895.html