node如何实现图片的上传功能-CSDN博客

目标

图片的上传

npm install multer --save

banner.ejs

<section>

<h1>

轮播图管理

</h1>

<ol>

<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>

<li>Here</li>

</ol>

</section>



<section>



<div>

<div>

<a href='/addBannerRoute'><button class = "btn btn-xs btn-success">添加轮播图</button></a>

</div>



<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>



</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>

<div class="box box-info">

<div class="box-header with-border">

<h3>Horizontal Form</h3>

</div>





<form enctype = "multipart/form-data" method = "post" action = '/addBannerAction'>

<div>

<div>

<label for="bannerid" class="col-sm-2 control-label">轮播图id</label>

<div>

<input type="text" name = "bannerid" id="bannerid" placeholder="轮播图id">

</div>

</div>

<div>

<label for="bannerimg" class="col-sm-2 control-label">上传图片</label>

<div>

<input type="file" name = "bannerimg" id="bannerimg" >

</div>

</div>

<div>

<label for="" class="col-sm-2 control-label">展示图片</label>

<div>

<img src = " " style="width:100px;height:auto;"/>

</div>

</div>

<div>

<label for="bannerurl" class="col-sm-2 control-label">链接地址</label>

<div>

<input type="url" name = "bannerurl" id="bannerurl" placeholder="链接地址">

</div>

</div>

</div>



<div>

<div>

<label for="castsalt" class="col-sm-2 control-label sr-only">alt</label>

<div>

<input type="submit"class="btn btn-info" value = "添加"/>

</div>

</div>

</div>



</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);

渲染列表......