標籤：style blog http java color 使用
目錄前面講了一個構建網站的樣本，這次在此基礎上再說說web的常規功能----檔案上傳，樣本以一個上傳圖片的功能為例子
上傳功能命名用formidable實現，樣本很簡單!
PS：最近比較忙，距上一次更新已經比較久了^_^!
formidable簡介nodejs原生實現上傳還是比較麻煩，有興趣的自已去參考一下網上有網友寫的代碼
這裡選擇了formidable，也是github上同類功能模組人氣比較高的
https://github.com/felixge/node-formidable
https://www.npmjs.org/package/formidable
優點：上傳速度比較可觀，佔用記憶體也比較低，簡單易用...
建立項目安裝formidable1.建立項目sampleUpload
cd 工作目錄
express -e sampleUpload
2.修改package.json檔案，添加formidable依賴項
{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "express": "~4.0.0", "static-favicon": "~1.0.0", "morgan": "~1.0.0", "cookie-parser": "~1.0.1", "body-parser": "~1.0.0", "debug": "~0.7.4", "ejs": "~0.8.5", "formidable" : "latest" }}
3.安裝依賴項
cd sampleUpload && npm install
安裝成功，一切準備就緒，開始完成這個功能！
實現上傳功能1.index.ejs檔案中構建表單並實現前端驗證（樣式使用和http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 一致）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= title %></title> <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" /> </head> <body> <div id="container" class="container"> <% if (locals.success) { %> <div id="alt_sucess" class="alert alert-success"> <%- success %> </div> <% } %> <% if (locals.error) { %> <div id="alt_warning" class="alert alert-warning"> <%= error %> </div> <% } %> <form class="form-signin" role="form" method="post" enctype=‘multipart/form-data‘> <h2 class="form-signin-heading">上傳檔案</h2> <input id="fulAvatar" name="fulAvatar" type="file" class="form-control" /> <br/> <button id="btnSub" class="btn btn-lg btn-primary" type="submit">上 傳</button> </form> </div> </body></html><script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript"> String.prototype.format = function (args) { var result = this; if (arguments.length > 0) { if (arguments.length == 1 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 0; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + i + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } $(function(){ $(‘#btnSub‘).on(‘click‘,function(){ var fulAvatarVal = $(‘#fulAvatar‘).val(), errorTip = ‘<div id="errorTip" class="alert alert-warning">{0}</div> ‘; $("#errorTip,#alt_warning").remove(); if(fulAvatarVal.length == 0) { $("#container").prepend(errorTip.format(‘請選擇要上傳的檔案‘)); return false; } var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf(‘.‘),fulAvatarVal.length).toLowerCase(); if(extName != ‘.png‘ && extName != ‘.jpg‘){ $("#container").prepend(errorTip.format(‘只支援png和jpg格式圖片‘)); return false; } return true; }) });</script>
這裡一定要注意表單的enctype屬性，這個就不多作解釋了，如果是初次接觸，看看http://www.w3school.com.cn/tags/att_form_enctype.asp
2.實現index.js中上傳邏輯
var express = require(‘express‘) router = express.Router(), formidable = require(‘formidable‘), fs = require(‘fs‘), TITLE = ‘formidable上傳樣本‘, AVATAR_UPLOAD_FOLDER = ‘/avatar/‘/* GET home page. */router.get(‘/‘, function(req, res) { res.render(‘index‘, { title: TITLE });});router.post(‘/‘, function(req, res) { var form = new formidable.IncomingForm(); //建立上傳表單 form.encoding = ‘utf-8‘; //設定編輯 form.uploadDir = ‘public‘ + AVATAR_UPLOAD_FOLDER; //設定上傳目錄 form.keepExtensions = true; //保留尾碼 form.maxFieldsSize = 2 * 1024 * 1024; //檔案大小 form.parse(req, function(err, fields, files) { if (err) { res.locals.error = err; res.render(‘index‘, { title: TITLE }); return; } var extName = ‘‘; //尾碼名 switch (files.fulAvatar.type) { case ‘image/pjpeg‘: extName = ‘jpg‘; break; case ‘image/jpeg‘: extName = ‘jpg‘; break; case ‘image/png‘: extName = ‘png‘; break; case ‘image/x-png‘: extName = ‘png‘; break; } if(extName.length == 0){ res.locals.error = ‘只支援png和jpg格式圖片‘; res.render(‘index‘, { title: TITLE }); return; } var avatarName = Math.random() + ‘.‘ + extName; var newPath = form.uploadDir + avatarName; console.log(newPath); fs.renameSync(files.fulAvatar.path, newPath); //重新命名 }); res.locals.success = ‘上傳成功‘; res.render(‘index‘, { title: TITLE }); });module.exports = router;
注意：在public檔案夾中建立avatar檔案夾以供檔案存放
運行結果1.在app.js中添加8000連接埠的監聽
2.cd到項目根目錄，運行 node app
3.瀏覽器上訪問 localhost:8000
4.上傳圖片
5.去上傳檔案夾中查看
大功告成！
部分疑惑解析有一些在代碼中有注釋的我就不解釋了
1.怎麼沒看到上傳？
注意：form.parse 再看看formidable的解釋
Automatically writing file uploads to disk
2.為什麼需要fs.renameSync
原因和上一個問題有關，它會自動被上傳到使用者的臨時目錄（這個可以把files.fulAvatar.path輸出來看一下便知） http://nodejs.org/docs/latest/api/fs.html#fs_fs_renamesync_oldpath_newpath
3.可不可以看到上傳進度
可以，https://github.com/felixge/node-formidable#events （仔細看看events，可能有你要用的其它部分）
但是只是在控制台輸出，想在前端去顯示進度條是不行的（沒有去研究，想想別的辦法應該也可以）
4.檔案名稱想命名UUID不重複，在nodejs中怎麼辦？
可以使用node-uuid，調用簡單 https://github.com/broofa/node-uuid
...
其它的留言問吧^_^!
寫在之後功能比較簡單，代碼也是樣本風格，大家主要關注一下使用
代碼結構最佳化方向：
1.比如檔案尾碼這一類的方法可以放到一個pub.js中，此js專門用於這些公有方法
2.可以利於傳回值的方式去返回資料，前端根據傳回值做出相應的提示
3.可以利於jquer.form.js去提交表單，post中用res.json方法傳回值，最佳化體驗（同樣引用這個js也會增大頁面體積）
....
總之是個小例子，大家將就著看看吧^_^!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
