創(chuàng)建express項(xiàng)目，進(jìn)行路由編寫，render ejs內(nèi)容。

首先安裝依賴

npm install multiparty --save

選擇一個(gè)ejs文件，編寫前端html結(jié)構(gòu)，如下：

<form action="/users/xxx" method="post" enctype="multipart/form-data" class="form-horizontal">? <div class="form-group">? ? <input type="text" class="form-control"? name="tit" placeholder="標(biāo)題">? </div>? <div class="form-group">? ? <textarea rows="" cols="" class="form-control" name="con"? placeholder="內(nèi)容"></textarea>? </div>? <div>? <input type="file" name="pic" />? </div>? <button type="submit" class="btn btn-default">提交</button> </form>

編寫路由文件，代碼如下：

var form = new multiparty.Form();? ? form.uploadDir = './public/upload';? //上傳圖片保存的地址 目錄必須存在? ? form.parse(req, function (err, fields, files) {? ? ? ? //獲取提交的數(shù)據(jù)以及圖片上傳成功返回的圖片信息? ? ? ? console.log(fields);? // 獲取表單的數(shù)據(jù)? ? ? ? console.log(files);? // 圖片上傳成功返回的信息? ? ? ? var title = fields.tit[0];? ? ? ? var con = fields.con[0];? ? ? ? var pic = files.pic[0].path; mongodb.connect(db_str,(err,database)=>{ database.collection('xxx',(err,coll)=>{ coll.insert({ ? ? ? ? ? ? title: title, ? ? ? ? ? ? con:con, ? ? ? ? ? ? pic: pic

}, ()=>{ res.send("<script>alert('商品數(shù)據(jù)庫插入成功！??！');location.href='/xxx'</script>"); database.close() }) }) })})

加載展示mongodb數(shù)據(jù)庫中上傳的圖片，代碼如下：

router.get('/boke',(req,res)=>{ mongodb.connect(db_str,(err,dbs)=>{ dbs.collection('boke',(err,coll)=>{ coll.find().sort({_id:-1}).toArray((err,data)=>{ res.render('boke',{data:data}) }) }) }) })

ejs代碼如下：

? ? ? ? <table class="table"> ? <tr> ? <th>序號(hào)</th> ? <th>標(biāo)題</th> ? <th>操作</th> ? </tr> ? <% data.map(function(item,i){ %>

<tr> <td><%-i+1 %></td> <td><a href="/detail?id=<%-item._id %>"><%-item.title %></a></td> <td><button class="btn btn-danger delete" title="<%-item._id %>">刪除</button></td> </tr> ? <% }) %>

? </table>