在我上一篇寫的Node.js實(shí)現(xiàn)簡(jiǎn)單的POST請(qǐng)求
里面POST請(qǐng)求接受參數(shù)需要寫兩個(gè)事件，這難免有些不太方便
如果我們用formidable來接受參數(shù)的話，會(huì)變得特別方便。
下面我們來寫一個(gè)Demo，來利用formidable來實(shí)現(xiàn)圖片上傳
1.下面來看一眼 目錄結(jié)構(gòu)
2.先來寫一個(gè)簡(jiǎn)單的前端上傳頁面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form class="upload" action="shangchuan" enctype="multipart/form-data" method="post"><!-- 上傳接口是/shangchuan -->
<p>
請(qǐng)上傳一個(gè)頭像
<input type="file" name="wenjian">
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
2.package.json 文件
安裝依賴,執(zhí)行下面這三句npm語句
npm install finalhandler --save
npm install serve-static --save
npm install formidable --save
之后會(huì)自動(dòng)生成下面這個(gè)package.json文件
{
"dependencies": {
"finalhandler": "^1.1.1",
"formidable": "^1.2.1",
"serve-static": "^1.13.2"
}
}
3.post.js
var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')
var url = require('url')
var fs = require('fs')
var querystring = require('querystring')
var formidable = require('formidable')
var path = require('path')
// Serve up public/ftp folder
//配置靜態(tài)資源服務(wù)器，將public文件夾靜態(tài)化出來
var serve = serveStatic('public', {'index': ['index.html', 'index.htm']})
// Create server
var server = http.createServer(function onRequest (req, res) {
//路由
var pathname = url.parse(req.url).pathname;
if(pathname == '/shangchuan'){
//創(chuàng)建一個(gè)表單的實(shí)例，formidable
var form = new formidable.IncomingForm();
//設(shè)置上傳的文件存放在哪里
form.uploadDir = './uploads';
//處理表單
form.parse(req,(err,fields,files) => {
//fields 表示普通控件
//files 表示文件控件
if(!files.wenjian){
return;
}
if(!files.wenjian.name){
return;
}
var extname = path.extname(files.wenjian.name);獲取文件的擴(kuò)展名，便于下面修改上傳后的文件名字
//改名
fs.rename(files.wenjian.path, files.wenjian.path + extname,() => {
res.end('上傳成功')
})
// console.log(fields);
})
return;
}
serve(req, res, finalhandler(req, res))
})
// Listen
server.listen(3000);
console.log('服務(wù)已經(jīng)啟動(dòng)在3000端口');
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
4.最后找到post文件的目錄，然后開始node post.js
會(huì)看到這個(gè)頁面
然后選擇任意文件點(diǎn)擊提交
會(huì)發(fā)現(xiàn)在很短的時(shí)間內(nèi)你的文件會(huì)提交成功在你的uploads文件夾下。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
