node實現圖片的上傳功能

來自專欄 Web前端開發工程師成長營1 人贊了文章

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 = " " stylex="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: http://www.aaa.com } */ },

註冊路由：注意第二個參數為上傳文件時必須寫的參數

router.post(/addBannerAction, upload.single(bannerimg), banner.addBannerAction);

渲染列表......

推薦閱讀：