快捷導(dǎo)航

淺析Node.js實(shí)現(xiàn)HTTP文件下載

更新時(shí)間：2016年08月05日 16:59:05 投稿：daisy

本文介紹如何用Node.js來(lái)實(shí)現(xiàn)HTTP文件下載，文章以實(shí)例演示所以很詳細(xì)，有需要的小伙伴們可以參考學(xué)習(xí)。

前言

HTTP實(shí)現(xiàn)文件下載時(shí)，只要在服務(wù)器設(shè)置好相關(guān)響應(yīng)頭，并使用二進(jìn)制傳輸文件數(shù)據(jù)即可，而客戶(hù)端(瀏覽器)會(huì)根據(jù)響應(yīng)頭接收文件數(shù)據(jù)。而在Node.js中，設(shè)置好響應(yīng)頭后，讀取文件流，再使用“.pipe()”方法將流轉(zhuǎn)接到響應(yīng)對(duì)象Response就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文件下載服務(wù)器。

1. 文件下載介紹

HTTP基于請(qǐng)求頭和響應(yīng)頭實(shí)現(xiàn)狀態(tài)交互，在得到服務(wù)器正確響應(yīng)狀態(tài)后，而客戶(hù)端首先會(huì)解析響應(yīng)頭，并根據(jù)響應(yīng)頭來(lái)接收和展示數(shù)據(jù)（響應(yīng)體）。對(duì)于文件下載來(lái)說(shuō)，其實(shí)現(xiàn)過(guò)程如下：

1.客戶(hù)端發(fā)起文件資源請(qǐng)求

2.服務(wù)器查找對(duì)應(yīng)文件，并設(shè)置”Content-Type”、”Content-Disposition”等響應(yīng)頭，分別用于表示文件的”MIME”類(lèi)型及文件描述

3.客戶(hù)端根據(jù)服務(wù)器返回的響應(yīng)頭解析和接收文件數(shù)據(jù)

需要設(shè)置的響應(yīng)頭

設(shè)置文件下載響應(yīng)頭時(shí)，除了常用的HTTP響應(yīng)頭外，比較重要是還要設(shè)置以下兩個(gè)響應(yīng)頭：

Content-Type: application/octet-stream
Content-Disposition: attachment; filename=MyFileName.ext

在上面的設(shè)置中，”Content-Type: application/octet-stream”告訴瀏覽器這是一個(gè)二進(jìn)制文件，”Content-Disposition”告訴瀏覽器這是一個(gè)需要下載的附件并告訴瀏覽器默認(rèn)的文件名。如果不添加”Content-Disposition”響應(yīng)頭，瀏覽器可能會(huì)下載或顯示文件內(nèi)容，不同瀏覽器的處理有所不同。

2. Node.js文件下載服務(wù)器實(shí)現(xiàn)

接下來(lái)我們基于Express 框架實(shí)現(xiàn)一個(gè)簡(jiǎn)單文件下載服務(wù)器，在這個(gè)服務(wù)器中主要包括兩個(gè)功能：服務(wù)器文件的瀏覽、文件的下載。

2.1 添加路由

創(chuàng)建Express應(yīng)用后，添加如下兩個(gè)路由：

router.get('/files', function(req, res, next) {
 // 顯示服務(wù)器文件 
});
router.get('/file/:fileName', function(req, res, next) {
 // 實(shí)現(xiàn)文件下載 
});

上面的添加的兩個(gè)路由分別用于：顯示服務(wù)器文件、實(shí)現(xiàn)文件下載。

2.2 顯示服務(wù)器文件

實(shí)現(xiàn)服務(wù)器文件的顯示，要通過(guò)”fs”模塊讀取文件目錄并進(jìn)行文件/目錄檢查等。還需要使用”path”模塊處理文件路徑。首先引入這兩個(gè)模塊：

const fs = require('fs');
const path = require('path');

顯示服務(wù)器文件實(shí)現(xiàn)代碼如下：

router.get('/files', function(req, res, next) {
 // 顯示服務(wù)器文件 
 // 文件目錄
 var filePath = path.join(__dirname, './');
 fs.readdir(filePath, function(err, results){
  if(err) throw err;
  if(results.length>0) {
   var files = [];
   results.forEach(function(file){
   if(fs.statSync(path.join(filePath, file)).isFile()){
     files.push(file);
   }
   })
   res.render('files', {files:files});
  } else {
   res.end('當(dāng)前目錄下沒(méi)有文件');
  }
 });
});

上面代碼中，讀取目錄后通過(guò)視圖文件”files.ejs”顯示可下載文件列表。其代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <title>下載文件選擇</title>
 </head>
 <body>
  <h1>請(qǐng)選擇下載文件：</h1>
  <% if(files.length>0) {%>
  <ul>
   <% files.forEach(function(file){ %>
   <li>
    <a href="/file/<%- file %>" target="_blank"><%- file %></a>
   </li>
   <%})%>
  </ul>
  <%} else {%>
  <p>沒(méi)有可下載文件…</p>
  <%}%>
 </body>
</html>

2.3 實(shí)現(xiàn)文件下載

實(shí)現(xiàn)文件下載時(shí)，可以先讀取文件到一個(gè)”Buffer”中，再通過(guò)”res.send()”或”res.end()”方法發(fā)送文件數(shù)據(jù)，也可以基于流（”Stream”）實(shí)現(xiàn)文件數(shù)據(jù)的發(fā)送。使用”Stream”實(shí)現(xiàn)文件下載時(shí)，可以使用”fs.createReadStream()”方法創(chuàng)建一個(gè)可讀流，而響應(yīng)對(duì)象Response是一個(gè)可寫(xiě)流。這樣，只需要通過(guò)”.pipe()”方法將文件流轉(zhuǎn)接到Response響應(yīng)流中即可。

文件下載實(shí)現(xiàn)代碼如下：

router.get('/file/:fileName', function(req, res, next) {
 // 實(shí)現(xiàn)文件下載 
 var fileName = req.params.fileName;
 var filePath = path.join(__dirname, fileName);
 var stats = fs.statSync(filePath); 
 if(stats.isFile()){
  res.set({
   'Content-Type': 'application/octet-stream',
   'Content-Disposition': 'attachment; filename='+fileName,
   'Content-Length': stats.size
  });
  fs.createReadStream(filePath).pipe(res);
 } else {
  res.end(404);
 }
});

總結(jié)

以上就是利用Node.js實(shí)現(xiàn)HTTP文件下載的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)Node.js有所幫助。

您可能感興趣的文章: