我們先實現從指定路徑讀取圖片然後輸出到頁面的功能。 先準備一張圖片imgs/dog.jpg。 file.js裡面繼續添加readImg方法，在這裡註意讀寫的時候都需要聲明'binary'。（file.js 在上一篇文章nodejs進階3-路由處理中有完整的內容） 伺服器創建代碼如下，註意在發送請求頭 ...
我們先實現從指定路徑讀取圖片然後輸出到頁面的功能。
先準備一張圖片imgs/dog.jpg。
file.js裡面繼續添加readImg方法，在這裡註意讀寫的時候都需要聲明'binary'。（file.js 在上一篇文章nodejs進階3-路由處理中有完整的內容）
1 readImg:function(path,res){ 2 fs.readFile(path,'binary',function(err, file) { 3 if (err) { 4 console.log(err); 5 return; 6 }else{ 7 console.log("輸出文件"); 8 //res.writeHead(200, {'Content-Type':'image/jpeg'}); 9 res.write(file,'binary'); 10 res.end(); 11 } 12 }); 13 }
伺服器創建代碼如下，註意在發送請求頭時需要聲明 {'Content-Type':'image/jpeg'}
1 var http = require('http'); 2 var file = require('./models/file'); 3 http.createServer(function (request, response) { 4 //response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); 5 response.writeHead(200, {'Content-Type':'image/jpeg'}); 6 if(request.url!=="/favicon.ico"){ //清除第2此訪問 7 console.log('訪問'); 8 //response.write('hello,world');//不能向客戶端輸出任何位元組 9 file.readImg('./imgs/dog.jpg',response); 10 //------------------------------------------------ 11 console.log("繼續執行"); 12 //response.end('hell,世界');//end在方法中寫過 13 } 14 }).listen(8000); 15 console.log('Server running at http://127.0.0.1:8000/');
運行後在瀏覽器里可以看到讀取後的圖片顯示出來。
當然我們真正應用時並不會這樣使用，下麵我們在換一種方式調用圖片，在html里發送請求圖片的方法。
1 <html> 2 <head></head> 3 <body> 4 登錄： 5 <p>這是一個段落</p> 6 <h1>樣式1</h1> 7 <img src="./showImg"></img> 8 </body> 9 <html>
我們用login.html繼續測試，在裡面加入一個img標簽，src的值為"./showImg",這樣瀏覽器會發送另外一個請求http://localhost:8000/showImg。
這樣我們在router裡面再加入一個方法showImg，在這個方法裡面調用file文件里的readImg方法（在本文的第一段代碼里）
showImg:function(req,res){ file.readImg('./imgs/dog.jpg',res); }
我們運行http://localhost:8000/login
（nodejs進階為一系列教程，可以單獨閱讀，之間有一定的關聯性，最好能系統的進行學習。）
