輕鬆建立nodejs伺服器（10）：處理上傳圖片

本節我們將實現，用戶上傳圖片，並將該圖片在瀏覽器中顯示出來。

這裡我們要用的外部模組是Felix Geisendörfer開發的node-formidable模組。它對解析上傳的文件資料做了很好的抽象。

要安裝這個外部模組，需要在cmd下執行指令：

複製程式碼程式碼如下:

npm install formidable

如果輸出類似的訊息就代表安裝成功了：

複製程式碼程式碼如下:

npm info build Success: formidable@1.0.14

安裝成功後我們用request引入即可：

複製程式碼程式碼如下:

var formidable = require(“formidable”);

這裡該模組做的就是將透過HTTP POST請求提交的表單，在Node.js中可以被解析。我們要做的就是建立一個新的IncomingForm，它是對提交表單的抽象表示，之後，就可以用它解析request對象，取得表單中需要的資料欄位。

本文案例的圖片檔案儲存在 /tmp資料夾中。

我們先來解決一個問題：如何才能在瀏覽器中顯示儲存在本機硬碟中的檔案？

我們使用fs模組來將檔案讀取到伺服器中。

我們來新增/showURL的請求處理程序，該處理程序直接硬編碼將檔案/tmp/test.png內容展示到瀏覽器中。當然了，首先需要將該圖片儲存到這個位置才行。

我們隊requestHandlers.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);

重新啟動伺服器之後，透過造訪http://localhost:8888/show，就可以看到儲存在/tmp/test.png的圖片了。

好，最後我們要的是：

 在/start表單中新增一個檔案上傳元素

 將node-formidable整合到我們的upload請求處理程序中，用於將上傳的圖片儲存到/tmp/test.png

 將上傳的圖片內嵌到/uploadURL輸出的HTML中

第一項很簡單。只需要在HTML表單中，新增一個multipart/form-data的編碼類型，移除先前的文字區，新增一個檔案上傳元件，並將提交按鈕的文案改為「Upload file」即可。如下requestHandler.js所示：

複製程式碼程式碼如下:

接下來，我們要完成第二步，我們從server.js開始－移除對postData的處理以及request.setEncoding （這部分node-formidable本身會處理），轉而採用將request物件傳遞給請求路由的方式：

複製程式碼程式碼如下:

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物件：

複製程式碼程式碼如下:

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;

現在，request物件就可以在我們的upload請求處理程序中使用了。 node-formidable會處理將上傳的檔案儲存到本機/tmp目錄中，而我們需

要做的是確保該檔案保存成/tmp/test.png。

接下來，我們把處理檔案上傳以及重新命名的操作放到一起，如下requestHandlers.js所示：

複製程式碼程式碼如下:

");
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;

做到這裡，我們的伺服器就全部完成了。

在執行圖片上傳的過程中，有的人可能會遇到這樣的問題：

照成這個問題的原因我猜是由於磁碟分割區導致的，要解決這個問題就需要改變formidable的預設零時資料夾路徑，保證和目標目錄處於同一個磁碟分割區。

我們找到requestHandlers.js的 upload函數，將它做一些修改：

複製程式碼程式碼如下:

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:
");
response.write(" 輕鬆建立nodejs伺服器（10）：處理上傳圖片_node.js

");
response.end();
});
}

我們增加了一句 form.uploadDir = “tmp”，現在重啟伺服器，再執行上傳操作，問題完美解決。