輕松創(chuàng)建nodejs服務(wù)器（10）：處理上傳圖片
更新時間：2014年12月18日 11:50:45 投稿：junjie
這篇文章主要介紹了輕松創(chuàng)建nodejs服務(wù)器（10）：處理上傳圖片,本文是系列文章的最后一篇,包含了一個完整的處理上傳圖片的例子,需要的朋友可以參考下
本節(jié)我們將實(shí)現(xiàn)，用戶上傳圖片，并將該圖片在瀏覽器中顯示出來。
這里我們要用到的外部模塊是Felix Geisendörfer開發(fā)的node-formidable模塊。它對解析上傳的文件數(shù)據(jù)做了很好的抽象。
要安裝這個外部模塊，需在cmd下執(zhí)行命令：
復(fù)制代碼 代碼如下:
npm install formidable
如果輸出類似的信息就代表安裝成功了：
復(fù)制代碼 代碼如下:
npm info build Success: formidable@1.0.14
安裝成功后我們用request將其引入即可：
復(fù)制代碼 代碼如下:
var formidable = require(“formidable”);
這里該模塊做的就是將通過HTTP POST請求提交的表單，在Node.js中可以被解析。我們要做的就是創(chuàng)建一個新的IncomingForm，它是對提交表單的抽象表示，之后，就可以用它解析request對象，獲取表單中需要的數(shù)據(jù)字段。
本文案例的圖片文件存儲在 /tmp文件夾中。
我們先來解決一個問題：如何才能在瀏覽器中顯示保存在本地硬盤中的文件？
我們使用fs模塊來將文件讀取到服務(wù)器中。
我們來添加/showURL的請求處理程序，該處理程序直接硬編碼將文件/tmp/test.png內(nèi)容展示到瀏覽器中。當(dāng)然了，首先需要將該圖片保存到這個位置才行。
我們隊(duì)requestHandlers.js進(jìn)行一些修改：
復(fù)制代碼 代碼如下:
var querystring = require("querystring"),
fs = require("fs");
function start(response, postData) {
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" method="post">'+
'<textarea name="text" rows="20" cols="60"></textarea>'+
'<input type="submit" value="Submit text" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent the text: "+ querystring.parse(postData).text);
response.end();
}
function show(response, postData) {
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;
我們還需要將這新的請求處理程序，添加到index.js中的路由映射表中：
復(fù)制代碼 代碼如下:
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);
重啟服務(wù)器之后，通過訪問http://localhost:8888/show，就可以看到保存在/tmp/test.png的圖片了。
好，最后我們要的就是：
在/start表單中添加一個文件上傳元素
將node-formidable整合到我們的upload請求處理程序中，用于將上傳的圖片保存到/tmp/test.png
將上傳的圖片內(nèi)嵌到/uploadURL輸出的HTML中
第一項(xiàng)很簡單。只需要在HTML表單中，添加一個multipart/form-data的編碼類型，移除此前的文本區(qū)，添加一個文件上傳組件，并將提交按鈕的文案改為“Upload file”即可。 如下requestHandler.js所示：
復(fù)制代碼 代碼如下:
var querystring = require("querystring"),
fs = require("fs");
function start(response, postData) {
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">'+
'<input type="submit" value="Upload file" />'+
'</form>'+
'</body>'+
'</html>';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent the text: "+ querystring.parse(postData).text);
response.end();
}
function show(response, postData) {
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;
接下來，我們要完成第二步，我們從server.js開始 —— 移除對postData的處理以及request.setEncoding （這部分node-formidable自身會處理），轉(zhuǎn)而采用將request對象傳遞給請求路由的方式：
復(fù)制代碼 代碼如下:
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(8888);
console.log("Server has started.");
}
exports.start = start;
接下來修改router.js，這次要傳遞request對象：
復(fù)制代碼 代碼如下:
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;
現(xiàn)在，request對象就可以在我們的upload請求處理程序中使用了。node-formidable會處理將上傳的文件保存到本地/tmp目錄中，而我們需
要做的是確保該文件保存成/tmp/test.png。
接下來，我們把處理文件上傳以及重命名的操作放到一起，如下requestHandlers.js所示：
復(fù)制代碼 代碼如下:
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();
console.log("about to parse");
form.parse(request, function(error, fields, files) {
console.log("parsing done");
fs.renameSync(files.upload.path, "/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("/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;
做到這里，我們的服務(wù)器就全部完成了。
在執(zhí)行圖片上傳的過程中，有的人可能會遇到這樣的問題：
照成這個問題的原因我猜測是由于磁盤分區(qū)導(dǎo)致的，要解決這個問題就需要改變formidable的默認(rèn)零時文件夾路徑，保證和目標(biāo)目錄處于同一個磁盤分區(qū)。
我們找到requestHandlers.js的 upload函數(shù)，將它做一些修改：
復(fù)制代碼 代碼如下:
function upload(response, request) {
console.log("Request handler 'upload' was called.");
var form = new formidable.IncomingForm();
console.log("about to parse");
form.uploadDir = "tmp";
form.parse(request, function(error, fields, files) {
console.log("parsing done");
fs.renameSync(files.upload.path, "/tmp/test.png");
response.writeHead(200, {"Content-Type": "text/html"});
response.write("received image:<br/>");
response.write("<img src='/show' />");
response.end();
});
}
我們增加了一句 form.uploadDir = “tmp”，現(xiàn)在重啟服務(wù)器，再執(zhí)行上傳操作，問題完美解決。
相關(guān)文章
npm?install?XXX安裝路徑文件夾權(quán)限問題的解決過程
這篇文章主要給大家介紹了關(guān)于npm?install?XXX安裝路徑文件夾權(quán)限問題(npm?ERR!?The?operation?was?rejected?by?your?operating?system.errno?-4080)的解決過程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了yarn?命令死循環(huán)問題分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Google官方支持的NodeJS訪問API，提供后臺登錄授權(quán)
Google官方支持的NodeJS集成客戶端，用以訪問Google APIs， 支持OAuth 2.0授信及登錄認(rèn)證。登錄以后即可在后臺訪問例如 Google Drive（云存儲）， Google Analytics, Gmail等服務(wù)。2014-07-07
Node.js發(fā)送HTTP客戶端請求并顯示響應(yīng)結(jié)果的方法示例
這篇文章主要介紹了Node.js發(fā)送HTTP客戶端請求并顯示響應(yīng)結(jié)果的方法,結(jié)合完整實(shí)例形式分析了nodejs發(fā)送http請求及響應(yīng)的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
用Node.JS打造一個惡劣天氣實(shí)時預(yù)警系統(tǒng)
本文將從實(shí)戰(zhàn)的角度出發(fā)，利用NodeJS以及聚合數(shù)據(jù)的第三方免費(fèi)接口打造一個完整的天氣實(shí)時預(yù)警項(xiàng)目系統(tǒng)，具有一定的參考價值，感興趣的可以了解一下2021-12-12
這篇文章主要介紹了Node.js中的CommonJS模塊化規(guī)范,本文主要介紹了?CommonJS?規(guī)范在?Node?中的簡單應(yīng)用，主要就是導(dǎo)入和導(dǎo)出模塊，需要的朋友可以參考下2023-02-02
Node.js實(shí)現(xiàn)發(fā)送郵件功能
這篇文章主要為大家詳細(xì)介紹了Node.js實(shí)現(xiàn)發(fā)送郵件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Node.js + express基本用法,結(jié)合實(shí)例形式分析了nodejs導(dǎo)入express、路由訪問、數(shù)據(jù)處理等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
nodejs 提示‘xxx’ 不是內(nèi)部或外部命令解決方法
本文介紹了node.js包管理工具npm安裝模塊后，無法通過命令行執(zhí)行命令，提示‘xxx’ 不是內(nèi)部或外部命令的解決方法，給需要的小伙伴參考下。2014-11-11
Node服務(wù)端實(shí)戰(zhàn)之操作數(shù)據(jù)庫示例詳解
這篇文章主要為大家介紹了Node服務(wù)端實(shí)戰(zhàn)之操作數(shù)據(jù)庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12