輕松創(chuàng)建nodejs服務(wù)器（10）：處理上傳圖片

更新時(shí)間：2014年12月18日 11:50:45 投稿：junjie

這篇文章主要介紹了輕松創(chuàng)建nodejs服務(wù)器（10）：處理上傳圖片,本文是系列文章的最后一篇,包含了一個(gè)完整的處理上傳圖片的例子,需要的朋友可以參考下

本節(jié)我們將實(shí)現(xiàn)，用戶(hù)上傳圖片，并將該圖片在瀏覽器中顯示出來(lái)。

這里我們要用到的外部模塊是Felix Geisendörfer開(kāi)發(fā)的node-formidable模塊。它對(duì)解析上傳的文件數(shù)據(jù)做了很好的抽象。

要安裝這個(gè)外部模塊，需在cmd下執(zhí)行命令：

復(fù)制代碼代碼如下:

npm install formidable

如果輸出類(lèi)似的信息就代表安裝成功了：

復(fù)制代碼代碼如下:

npm info build Success: formidable@1.0.14

安裝成功后我們用request將其引入即可：

復(fù)制代碼代碼如下:

var formidable = require(“formidable”);

這里該模塊做的就是將通過(guò)HTTP POST請(qǐng)求提交的表單，在Node.js中可以被解析。我們要做的就是創(chuàng)建一個(gè)新的IncomingForm，它是對(duì)提交表單的抽象表示，之后，就可以用它解析request對(duì)象，獲取表單中需要的數(shù)據(jù)字段。

本文案例的圖片文件存儲(chǔ)在 /tmp文件夾中。

我們先來(lái)解決一個(gè)問(wèn)題：如何才能在瀏覽器中顯示保存在本地硬盤(pán)中的文件？

我們使用fs模塊來(lái)將文件讀取到服務(wù)器中。

我們來(lái)添加/showURL的請(qǐng)求處理程序，該處理程序直接硬編碼將文件/tmp/test.png內(nèi)容展示到瀏覽器中。當(dāng)然了，首先需要將該圖片保存到這個(gè)位置才行。

我們隊(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;

我們還需要將這新的請(qǐng)求處理程序，添加到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ù)器之后，通過(guò)訪(fǎng)問(wèn)http://localhost:8888/show，就可以看到保存在/tmp/test.png的圖片了。

好，最后我們要的就是：

 在/start表單中添加一個(gè)文件上傳元素

 將node-formidable整合到我們的upload請(qǐng)求處理程序中，用于將上傳的圖片保存到/tmp/test.png

 將上傳的圖片內(nèi)嵌到/uploadURL輸出的HTML中

第一項(xiàng)很簡(jiǎn)單。只需要在HTML表單中，添加一個(gè)multipart/form-data的編碼類(lèi)型，移除此前的文本區(qū)，添加一個(gè)文件上傳組件，并將提交按鈕的文案改為“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;

接下來(lái)，我們要完成第二步，我們從server.js開(kāi)始 —— 移除對(duì)postData的處理以及request.setEncoding （這部分node-formidable自身會(huì)處理），轉(zhuǎn)而采用將request對(duì)象傳遞給請(qǐng)求路由的方式：

復(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;

接下來(lái)修改router.js，這次要傳遞request對(duì)象：

復(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對(duì)象就可以在我們的upload請(qǐng)求處理程序中使用了。node-formidable會(huì)處理將上傳的文件保存到本地/tmp目錄中，而我們需

要做的是確保該文件保存成/tmp/test.png。

接下來(lái)，我們把處理文件上傳以及重命名的操作放到一起，如下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í)行圖片上傳的過(guò)程中，有的人可能會(huì)遇到這樣的問(wèn)題：

照成這個(gè)問(wèn)題的原因我猜測(cè)是由于磁盤(pán)分區(qū)導(dǎo)致的，要解決這個(gè)問(wèn)題就需要改變formidable的默認(rèn)零時(shí)文件夾路徑，保證和目標(biāo)目錄處于同一個(gè)磁盤(pán)分區(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(); 

 }); 

}