從零開始學(xué)習(xí)Node.js系列教程三：圖片上傳和顯示方法示例
更新時(shí)間：2017年04月13日 10:50:45 作者：MIN飛翔
這篇文章主要介紹了Node.js圖片上傳和顯示方法,結(jié)合實(shí)例形式分析了nodejs基于http傳輸圖片文件及顯示圖片的相關(guān)實(shí)現(xiàn)步驟與操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Node.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);
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;
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.");
var form = new formidable.IncomingForm();
form.uploadDir = "D:\\min\\nodejsExample2\\tmp";
console.log("about to parse1");
form.parse(request, function(error, fields, files) {
console.log("parsing done");
console.log(files.upload.path);
fs.renameSync(files.upload.path, "D:\\min\\nodejsExample2\\tmp\\test.png");
response.writeHead(200, {"Content-Type": "text/html"});
response.write("received image:<br/>");
response.write("<img src='/show' />");
response.end();
});
}
function show(response) {
console.log("Request handler 'show' was called.");
fs.readFile("D:\\min\\nodejsExample2\\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
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;
result:
知識(shí)點(diǎn)：
其中用到了fs模塊的readFile讀取文件，它有同步和異步兩個(gè)版本。node.js中，并不是所有的API都提供了異步和同步版本，node.js不鼓勵(lì)使用同步I/O。
//this is async 異步
/*
fs.readFile調(diào)用時(shí)所做的工作只是將異步式I/O請(qǐng)求發(fā)送給了操作系統(tǒng)，然后立即返回并執(zhí)行后面的語句，執(zhí)行完以后進(jìn)入事件循環(huán)監(jiān)聽事件。
當(dāng)fs接收到I/O請(qǐng)求完成的事件時(shí)，事件循環(huán)會(huì)主動(dòng)調(diào)用回調(diào)函數(shù)以完成后續(xù)工作。
*/
var fs = require('fs');
fs.readFile('file.txt', 'utf-8', function(err, data){
if (err){
console.error(err);
} else {
console.log(data);
}
});
//this is sync 同步
var fs = require('fs');
var data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);
console.log('end.');
希望本文所述對(duì)大家nodejs程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于CentOS7中源碼編譯安裝NodeJS的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用nodejs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
中間件（Middleware），特指業(yè)務(wù)流程的中間處理環(huán)節(jié)，Express中間件的調(diào)用流程-當(dāng)一個(gè)請(qǐng)求處理時(shí)，可以連續(xù)調(diào)用多個(gè)中間件，從而對(duì)這次請(qǐng)求進(jìn)行預(yù)處理2023-04-04
MongoDB是基于Javascript語言的數(shù)據(jù)庫(kù)，存儲(chǔ)格式是JSON，而Node也是基于JavaScript的環(huán)境（庫(kù)），所以node和mongoDB的搭配能減少因?yàn)閿?shù)據(jù)轉(zhuǎn)換帶來的時(shí)間空間開銷。今天我們來看看如何通過node.js來操作MongoliaDB2017-05-05
初學(xué)node.js中實(shí)現(xiàn)刪除用戶路由
這篇文章主要介紹了node.js中如何實(shí)現(xiàn)刪除用戶路由，下面和小編來一起學(xué)習(xí)一下吧2019-05-05
利用node.js搭建簡(jiǎn)單web服務(wù)器的方法教程
本文主題是使用node來搭建最簡(jiǎn)單的web服務(wù)器，其后可以自己根據(jù)需要深入了解，目前在開發(fā)過程中可以用來模擬與服務(wù)器進(jìn)行簡(jiǎn)單的交互，比如返回的資源控制等。需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-02-02
使用Meteor配合Node.js編寫實(shí)時(shí)聊天應(yīng)用的范例
這篇文章主要介紹了使用Meteor配合Node.js編寫實(shí)時(shí)聊天應(yīng)用的范例,Node.js作為異步框架,其最突出的使用便是用來編寫實(shí)時(shí)應(yīng)用程序，需要的朋友可以參考下2015-06-06
idea中支持運(yùn)行很多種編程語言,只需要在電腦中安裝好對(duì)應(yīng)的語言環(huán)境,下面這篇文章主要給大家介紹了關(guān)于如何在IDEA中配置Node.js的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Node.js 模塊系統(tǒng)的的相關(guān)資料，文中講解非常詳細(xì)，供大家參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
YApi 是一個(gè)可本地部署的、打通前后端及QA的、可視化的接口管理平臺(tái),下面這篇文章主要給大家介紹了關(guān)于Yapi安裝部署的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Node.JS獲取GET,POST數(shù)據(jù)之queryString模塊使用方法詳解
本文將詳細(xì)介紹nodeJS中的queryString模塊使用方法，包括Node.JS獲取GET,POST數(shù)據(jù)的方法,需要的朋友可以參考下2020-02-02