溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文主要是使用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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
