標籤：style blog http color io os 使用 java ar
Node.js實現圖片的上傳和顯示，需要用到外部模組，formidable，這個模組是對解釋上傳的檔案資料很好的抽象。檔案上傳，就是”處理“POST資料。
1,安裝模組,開啟nodejs安裝目錄,在命令列輸入指令：
npm install formidable
2.引用formidable的模組，使用require指令。這個模組就是將通過http post請求提交的表單，在Node.js中可以被解釋。
var formidable = require("formidable");
3.需要建立一個新的IncomingForm,對提交的表單的抽象表示，就可以用它解析request對象表單中需要的字。
var form = new formidable.IncomingForm();
4.實現圖片的上傳和顯示這個引用因為要引用到formidable，必須把項目放在nodejs的安裝目錄下。
5.程式：
-----requestHandlers.js
-----server.js
-----router.js
-----index.js
requestHandlers.js
/*requestHandlers.js*/var querystring = require("querystring"), fs = require("fs"), formidable = require ("formidable");function start(response){console.log("Request handler ‘start‘ was called");var body = ‘<html>‘ + ‘<head>‘ +‘<meta http-equiv="Content-Type" content="text/html charset=UTF-8"/>‘ +‘</head>‘ + ‘<body>‘ +‘<form action="/upload" enctype="multipart/form-data" method="post">‘ +‘<input type="file" name="upload" multiple="multiple"/>‘+‘<input type="submit" value="Upload file"/>‘+‘</form>‘ +‘</body>‘ +‘</html>‘;response.writeHead(200,{"Content-Type":"text/html"});response.write(body);response.end();}function upload(response, request){console.log("Request handler ‘upload‘ was called");/*formidable外部模組，解析上傳的檔案資料做了很好的抽象*/var form = new formidable.IncomingForm();//在應用目錄下建立檔案夾tmp，設定為上傳路徑form.uploadDir = "tmp"console.log("About to parse");form.parse(request,function(error,fields, files){console.log("parsing done");console.log(files.upload.path);//renameSync(oldpath,newpath)//同步操作，需要try catchtry{fs.renameSync(files.upload.path,"./tmp/test.png");}catch(e){console.log(e);}response.writeHead(200,{"Content-Type":"text/html"});response.write("received image:<br/>");//返回/show處理常式顯示圖片response.write("<img src=‘/show‘/>");response.end();});}//顯示圖片function show(response){console.log("Request handler ‘show‘ was called.");fs.readFile("./tmp/test.png","binary",function(error, file){if(error){response.writeHead(500,{"Content-Type":"text/plain"});response.write(error + "/n");response.end();}else{response.writeHead(200,{"Content-Type":"image/png"});response.write(file,"binary");response.end();}});}exports.start = start;exports.upload = upload;exports.show = show;
router.js
/*router.js*//*通過檢查給定的路徑對應的請求處理常式是否存在，如果存在的話直接調用相應的函數*/function route(handle,pathname,response,request){console.log("About to route a request for " + pathname);if(typeof handle[pathname] === ‘function‘){handle[pathname](response,request);}else{console.log("No request handler found for " + pathname);response.writeHead(404,{"Content-Type":"text/html"});response.write("404 Not found");response.end();}}exports.route = route;
server.js
/*server.js 處理請求模組*/var http = require("http");var url = require("url");function start(route,handle){function onRequest(request,response){var pathname = url.parse(request.url).pathname;console.log("Request for" + pathname + "Received.");route(handle,pathname,response,request);}http.createServer(onRequest).listen(3000);console.log("Server has started");}exports.start = start;
index.js
/*index.js 主模組*/var server = require("./server");var router = require("./router");var requestHandlers = require("./requestHandlers");var handle = {};handle["/"] = requestHandlers.start;handle["/start"] = requestHandlers.start;handle["/upload"] = requestHandlers.upload;handle["/show"] = requestHandlers.show;server.start(router.route,handle);
6.啟動應用：
node index.js
7.開啟URL
http://127.0.0.1:3000
8.上傳圖片後：
9.圖片被儲存在路徑：
nodejs----上傳顯示圖片
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
