node實現圖片的上傳功能
目標
圖片的上傳
npm install multer --save
banner.ejs
<section class="content-header">
<h1>
輪播圖管理
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
<div class="box">
<div class="box-header">
<a href='/addBannerRoute'><button class = "btn btn-xs btn-success">新增輪播圖</button></a>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<table class="table table-striped">
<tr>
<th>#序號</th>
<th>圖片</th>
<th>操作</th>
</tr>
<tr>
<td> 1</td>
<td>
<img src="" style = "height: 50px;width: auto"/>
</td>
<td>
<button class="btn btn-xs btn-warning" >編輯</button>
<button class="btn btn-xs btn-danger" >刪除</button>
</td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
</section>
定義新增輪播圖路由
addBannerRoute: ( req, res, next ) =>{
res.render('banner_add');
},
註冊路由
router.get('/addBannerRoute', banner.addBannerRoute);
新增輪播圖
enctype 屬性規定在傳送到伺服器之前應該如何對錶單資料進行編碼。
預設地，表單資料會編碼為 "application/x-www-form-urlencoded"。就是說，在傳送到伺服器之前，所有字元都會進行編碼（空格轉換為 "+" 加號，特殊符號轉換為 ASCII HEX 值）。
banner_add.ejs
<section class="content">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Horizontal Form</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form class="form-horizontal" enctype = "multipart/form-data" method = "post" action = '/addBannerAction'>
<div class="box-body">
<div class="form-group">
<label for="bannerid" class="col-sm-2 control-label">輪播圖id</label>
<div class="col-sm-10">
<input type="text" class="form-control" name = "bannerid" id="bannerid" placeholder="輪播圖id">
</div>
</div>
<div class="form-group">
<label for="bannerimg" class="col-sm-2 control-label">上傳圖片</label>
<div class="col-sm-10">
<input type="file" class="form-control" name = "bannerimg" id="bannerimg" >
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">展示圖片</label>
<div class="col-sm-10">
<img src = " " style="width:100px;height:auto;"/>
</div>
</div>
<div class="form-group">
<label for="bannerurl" class="col-sm-2 control-label">連結地址</label>
<div class="col-sm-10">
<input type="url" class="form-control" name = "bannerurl" id="bannerurl" placeholder="連結地址">
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="form-group">
<label for="castsalt" class="col-sm-2 control-label sr-only">alt</label>
<div class="col-sm-10">
<input type="submit"class="btn btn-info" value = "新增"/>
</div>
</div>
</div>
<!-- /.box-footer -->
</form>
</div>
</section>
定義路由addBannerAction， 檔案會存放在req.file或者req.files中，文字資訊放在req.body中
上傳完成得到圖片資訊只有名字（唯一的filename）,字尾需要通過req.file.mimetype獲取，以/分割去1，通過fs.rename方法改變名字，原路徑為"./uploads/" + req.file.filename;改變後為"./uploads/" + req.file.filename + "." + req.file.mimetype.split('/')[1];，使用序列有關聯，將路徑傳遞給下一個函式，下一個函式是連線資料庫函式，繼續傳值給第三個函式插入資料庫，最終得到結果
addBannerAction: ( req, res, next ) =>{
// console.log( req.file )
// console.log( req.body )
var bannerimg = req.file.filename + "." + req.file.mimetype.split('/')[1];
var oldname = "./uploads/" + req.file.filename;
var newname = "./uploads/" + bannerimg
async.waterfall( [
( cb ) => {
fs.rename( oldname, newname, ( err, data ) => {
if ( err ) throw err;
cb( null, bannerimg );
})
},
( bannerimg, cb ) => {
MongoClient.connect( mongourl, ( err, db ) => {
if ( err ) throw err;
console.log("bannerimg----", bannerimg );
cb( null, bannerimg, db );
})
},
( bannerimg, db, cb ) => {
console.log("bannerimg+++++", bannerimg)
var { bannerid, bannerurl } = req.body;
var insertObj = {
bannerimg,
bannerid,
bannerurl
}
console.log(insertObj)
db.collection('banner').insert( insertObj, ( err, data ) => {
if ( err ) throw err;
cb( null, "ok");
db.close();
})
}
], ( err, result ) => {
if ( err ) throw err;
if( result == "ok"){
res.redirect('/banner')
}
})
/**
*
{ fieldname: 'bannerimg',
originalname: '黨員教育培訓.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
filename: 'b752dbc2856609d250de6d10577f4292',
path: 'uploads\\b752dbc2856609d250de6d10577f4292',
size: 44683 }
{ banerid: '111', banerurl: '' }
*/
},
註冊路由：注意第二個引數為上傳檔案時必須寫的引數
router.post('/addBannerAction', upload.single('bannerimg'), banner.addBannerAction);
渲染列表......