nodejs讀取圖片返回給瀏覽器顯示

發(fā)布時間：2020-09-07 16:45:44 來源：腳本之家閱讀：275 作者：MR_Teen 欄目：web開發(fā)

本文主要是使用nodejs處理圖片等資源返回給瀏覽器顯示方法，但不只限制于圖片，也可以是音頻視頻等其他非字符串文件的返回和顯示。也可以擴(kuò)展成nodejs靜態(tài)資源服務(wù)器的開發(fā)方法。

請求頭說明

在http響應(yīng)里面有幾個重要的東西，Content-Type 說明文件渲染MIME類型,這是我們本文的相關(guān)處理關(guān)鍵。

常用的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"
}

處理方法

一、靜態(tài)返回資源

原理：

使用node.js的fs.readFile來處理。根據(jù)請求地址，轉(zhuǎn)換成實際的文件地址。判斷文件是否存在，不存在返回404，存在則讀取文件 ,并返回文件

//設(shè)置請求的返回頭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();

二、動態(tài)文件流處理

原理：

使用nodejs 的fs.createReadStream來處理，這樣處理的好處是斷點續(xù)傳。

response.set( 'content-type', mimeType );//設(shè)置返回類型
var stream = fs.createReadStream( imageFilePath );
var responseData = [];//存儲文件流
if (stream) {//判斷狀態(tài)
 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.把內(nèi)容轉(zhuǎn)為數(shù)組 var buffer = new Buffer(content); 傳給 httpServer這一步需要特別注意，一定不能把 content 當(dāng)成普通的字符串處理傳給 httpServer
3.httpServer 解析出數(shù)組 var list = …
4.httpServer 把數(shù)組轉(zhuǎn)為 Buffer, var buffer = new Buffer(list);
5.返回 response.write(buffer.toString(),”binary”); //注意，這里必須轉(zhuǎn)為字符串，不能以 Buffer 傳給瀏覽器.
6.值得注意的是，這里的 buffer 不能直接返回給客戶端，nodejs 以 binary 格式讀取的文件就是一個字符串，只是編碼不是普通的 utf-8

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

nodejs讀取圖片返回給瀏覽器顯示

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽