上一節(jié)-node.js學習（14）—nodejs模板引擎ejs
上節(jié)我們學學習了模板引擎壹店，本節(jié)我們學校文件上傳估盘。
目錄結(jié)構如下：
20190530154855.png
1.上傳（multer）
我們在upload.html添加下面代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上傳demo</title>
</head>
<body>
<form action="http://localhost:8080/infor" method="post" target="stop" enctype="multipart/form-data">
<input type="value" name='account'>
<input type="file" name='user'>
<input type="submit" value="上傳">
</form>
<!-- 阻止提交跳轉(zhuǎn)頁面 -->
<iframe name="stop" style="display:none;"></iframe>
</body>
</html>
在server.js添加下面代碼
const express=require('express');
const multer=require('multer');
// const bodyParser=require('body-parser');
const server=express();
// server.use(bodyParser.urlencoded())
var objMulter=multer({dest: './uploadImages'}); //設置上傳的的圖片保存目錄
server.use(objMulter.any());
server.post('/infor',function(req,res,next){
console.log(req.body,req.files)
res.send({
code:1,
msg:'成功'
})
})
server.listen(8080);
- 我們使用form提交數(shù)據(jù)時艳吠，如果需要提交的數(shù)據(jù)中含有圖片、音視頻等，需要給form添加
enctype="multipart/form-data"屬性冯痢，如果不加元莫，默認以enctype="application/x-www-form-urlencoded"編碼傳輸赖阻。如果需要詳情了解該屬性，可以網(wǎng)上搜索了解踱蠢。具體體現(xiàn)在請求頭的Content-Type上火欧，比如
20190530155923.png
- 前面我們講的body-parser組件只能處理
enctype="application/x-www-form-urlencoded"編碼的數(shù)據(jù)，并放到req.body中茎截，所以如果含有圖片等數(shù)據(jù)苇侵，需要借助中間件，這里使用multer中間件企锌。 -
multer({dest: './uploadImages'})表示將上傳的圖片傳輸?shù)街付ㄎ募A（這里以uploadImages為例榆浓，如果沒有該文件夾，會自動生成）,如果不添加dest屬性撕攒，這些文件將保存在內(nèi)存中陡鹃，永遠不會寫入磁盤烘浦。 -
objMulter.any()表示接收任何上傳的數(shù)據(jù)，對應的有個objMulter.single('user')(表示只接收name為user的上傳數(shù)據(jù))杉适，本例使用objMulter.any()接收任何上傳的數(shù)據(jù)谎倔。 - multer會將上傳的文件信息寫到
req.file中，表單的文本域信息放到req.body中（所以不需要再引入body-parser）
我們測試下如下：
222.gif
我已經(jīng)將截圖中打印的數(shù)據(jù)復制出來如下：
//req.body
{ account: 'eee' }
//req.files
[{
fieldname: 'user', //表單的name屬性值
originalname: '五月排行榜.png', //上傳的圖片原始文件名（含后綴）
encoding: '7bit', //文件編碼
mimetype: 'image/png', //上傳圖片格式（MIME 類型）
destination: './www/uploadImages', //上傳后的相對圖片路徑（不包含文件）
filename: 'db5debb87b20a324a36b618f27441fca', //上傳的圖片新生成的文件名（不含后綴）
path: 'www\\uploadImages\\db5debb87b20a324a36b618f27441fca', //上傳后的完整圖片路徑（包含文件）
size: 1182425 //上傳圖片大小
}]
至此猿推，我們已經(jīng)完成了一個簡單的文件上傳片习。但是上傳的文件由于不包含文件后綴，所以無法預覽蹬叭，那么怎么才能給上傳的圖片添加后綴呢藕咏？在添加后綴前，我們先了解下path模塊（獲取后綴）與fs模塊（重寫文件名）
2.path模塊
新建path.js文件秽五，增加如下代碼：
const path=require('path');
const file1='/home/user/dir/file.txt';
const str=path.parse(file1)
console.log(str)
運行path.js輸出結(jié)果如下：
{
root: '/',
dir: '/home/user/dir',
base: 'file.txt',
ext: '.txt',
name: 'file'
}
- 通過path模版的parse方法,
ext屬性可以獲取一個路徑的后綴.
3.fs模塊
新建a.txt文件以及rename.js,我們現(xiàn)在通過fs模塊將a.txt重命名為b.txt,我們在rename.js增加下面代碼
const fs=require('fs');
fs.rename('a.txt','b.txt',function(err){
if(err){
console.log('重命名錯誤');
}else{
console.log('重命名成功');
}
})
執(zhí)行代碼孽查，我們發(fā)現(xiàn)a.txt已經(jīng)變?yōu)?code>b.txt
init.gif
4.上傳圖片增加預覽
上面我們講到上傳的文件由于不包含文件后綴，所以無法預覽坦喘，現(xiàn)在我們通過path模塊與fs模塊來實現(xiàn)預覽功能
更改server.js如下
const express=require('express');
const multer=require('multer');
const path=require('path');
const fs=require('fs');
// const bodyParser=require('body-parser');
const server=express();
// server.use(bodyParser.urlencoded())
var objMulter=multer({dest: './uploadImages'});
server.use(objMulter.any());
server.post('/infor',function(req,res,next){
const newname=req.files[0].path+path.parse(req.files[0].originalname).ext
fs.rename(req.files[0].path,newname,function(err){
if(err){
res.send('上傳失敗')
}else{
res.send('上傳成功')
}
})
})
server.listen(8080);
上面的代碼應該很容易看懂盲再，獲取后綴，重命名文件瓣铣。測試如下
er.gif
