在我上一篇寫的Node.js實現簡單的POST請求
里面POST請求接受參數需要寫兩個事件，這難免有些不太方便
如果我們用formidable來接受參數的話，會變得特別方便。
下面我們來寫一個Demo，來利用formidable來實現圖片上傳
1.下面來看一眼 目錄結構
2.先來寫一個簡單的前端上傳頁面
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>
請上傳一個頭像
<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 文件
安裝依賴,執行下面這三句npm語句
npm install finalhandler --save
npm install serve-static --save
npm install formidable --save
之后會自動生成下面這個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
//配置靜態資源服務器，將public文件夾靜態化出來
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'){
//創建一個表單的實例，formidable
var form = new formidable.IncomingForm();
//設置上傳的文件存放在哪里
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);獲取文件的擴展名，便于下面修改上傳后的文件名字
//改名
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('服務已經啟動在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
會看到這個頁面
然后選擇任意文件點擊提交
會發現在很短的時間內你的文件會提交成功在你的uploads文件夾下。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
