nodejs進階(4)—讀取圖片到頁面


我們先實現從指定路徑讀取圖片然后輸出到頁面的功能。

先准備一張圖片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進階為一系列教程,可以單獨閱讀,之間有一定的關聯性,最好能系統的進行學習。)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM