本文主要是使用nodejs處理圖片等資源返回給瀏覽器顯示方法,但不只限制于圖片,也可以是音頻視頻等其他非字符串文件的返回和顯示。也可以擴展成nodejs靜態資源服務器的開發方法。
請求頭說明
在http響應里面有幾個重要的東西,Content-Type 說明文件渲染MIME類型,這是我們本文的相關處理關鍵。
常用的MIME類型
{ "css": "text/css", "gif": "image/gif", "html": "text/html", "ico": "image/x-icon", "jpeg": "image/jpeg", "jpg": "image/jpeg", "js": "text/javascript", "json": "application/json", "pdf": "application/pdf", "png": "image/png", "svg": "image/svg+xml", "swf": "application/x-shockwave-flash", "tiff": "image/tiff", "txt": "text/plain", "wav": "audio/x-wav", "wma": "audio/x-ms-wma", "wmv": "video/x-ms-wmv", "xml": "text/xml"}
處理方法
一、靜態返回資源
原理:
使用node.js的fs.readFile來處理。根據請求地址,轉換成實際的文件地址。判斷文件是否存在,不存在返回404,存在則讀取文件 ,并返回文件
//設置請求的返回頭type,content的type類型列表見上面response.setHeader("Content-Type", contentType);//格式必須為 binary 否則會出錯var content = fs.readFileSync(url,"binary"); response.writeHead(200, "Ok");response.write(content,"binary"); //格式必須為 binary,否則會出錯response.end();
二、動態文件流處理
原理:
使用nodejs 的fs.createReadStream來處理,這樣處理的好處是斷點續傳。
response.set( 'content-type', mimeType );//設置返回類型var stream = fs.createReadStream( imageFilePath );var responseData = [];//存儲文件流if (stream) {//判斷狀態 stream.on( 'data', function( chunk ) { responseData.push( chunk ); }); stream.on( 'end', function() { var finalData = Buffer.concat( responseData ); response.write( finalData ); response.end(); });}
1.客戶端讀取文件 var content = fs.createReadStream(filePath);
2.把內容轉為數組 var buffer = new Buffer(content); 傳給 httpServer這一步需要特別注意,一定不能把 content 當成普通的字符串處理傳給 httpServer
3.httpServer 解析出數組 var list = …
4.httpServer 把數組轉為 Buffer, var buffer = new Buffer(list);
5.返回 response.write(buffer.toString(),”binary”); //注意,這里必須轉為字符串,不能以 Buffer 傳給瀏覽器.
6.值得注意的是,這里的 buffer 不能直接返回給客戶端,nodejs 以 binary 格式讀取的文件就是一個字符串,只是編碼不是普通的 utf-8
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答