Node.js為我們提供了一個模塊來協(xié)助文件壓縮。在本文中，我們將構建一個應用程序，用戶可以在該應用程序中上傳他們想要壓縮的文件，然后使用Node.js Zlib模塊下載該文件的壓縮版本。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供上城企業(yè)網(wǎng)站建設,專注與網(wǎng)站設計制作、成都網(wǎng)站建設、html5、小程序制作等業(yè)務。10年已為上城眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。

前提

要繼續(xù)學習本教程，你需要具備以下條件：

• 熟悉HTML，CSS和Javascript(ES6 +)
• VS Code或開發(fā)計算機上安裝的任何代碼編輯器
• 在你的開發(fā)機器上安裝了Postman
• Vue和Node.js的基礎知識

設置項目

我們將從構建后端開始，這是我們應用程序的基礎。

在桌面上，為應用程序創(chuàng)建一個文件夾，群毆取名為 compressor，并通過運行 npm init -y設置一個新的Node.js項目。

我們先編寫后端服務，所以在項目中再建立一個 server 目錄。

現(xiàn)在，我們需要為應用程序安裝必要的軟件包：

• koa、koa-router：這將有助于設置我們的服務器以及路由
• nodemon：當我們對應用程序進行更改時，Nodemon將重新啟動我們的服務器
• multer：用于上傳文件的中間件
• cors：幫助將headers添加到代理請求中

要安裝所有這些，請在我們創(chuàng)建的 server 目錄中運行以下命令：

 
 
 
 

  
  
  
  
npm i --save koa koa-router nodemon multer cors 
 
 
 
 

完成安裝后，在 server 目錄內(nèi)創(chuàng)建一個 index.js 文件，這是我們將編寫后端代碼的地方。

使用VS Code打開文件夾。在開始之前，我們先創(chuàng)建一個 .gitignore 文件，并向其中添加 node_modules，這將防止將node_modules 文件夾添加到git中。

讓我們繼續(xù)來創(chuàng)建一個簡單的Koa.js服務器，然后配置我們的packages：

 
 
 
 

  
  
  
  
const express = require('express'); 
  
  
  
  
const multer = require('multer'); 
  
  
  
  
const zlib = require('zlib'); 
  
  
  
  
const cors = require('cors'); 
  
  
  
  
const fs = require('fs'); 
  
  
  
  
const path = require('path'); 
  
  
  
  
const app = express(); 
  
  
  
  
app.use(cors()); 
  
  
  
  
//multer 
  
  
  
  
const storage = multer.memoryStorage(); 
  
  
  
  
const upload = multer({ 
  
  
  
  
  storage: storage, 
  
  
  
  
}); 
  
  
  
  
app.listen(3000, () => { 
  
  
  
  
  console.log('App is runnuing on port 3000'); 
  
  
  
  
}); 
 
 
 
 

我們首先要求我們安裝的包，如Express、Multer和Cors。然后，我們創(chuàng)建一個Express的實例，并將其保存在一個變量中。我們使用Express實例來配置我們的 cors 作為中間件。

我們還需要一些Node.js的核心模塊，比如 zlib，我們將使用它來進行實際的壓縮。然后我們使用Express的實例來創(chuàng)建一個服務器，它將監(jiān)聽 3000 端口。

接下來，我們將創(chuàng)建一個路由，該路由將接收一個文件，然后返回壓縮文件。

Zlib有很多壓縮方法，但是在本文中，我們將使用 gzip 方法。

 
 
 
 

  
  
  
  
app.post("/compress", upload.single("file"), async (req, res) => { 
  
  
  
  
  try { 
  
  
  
  
    const destination = `compressed/${req.file.originalname}.gz`; 
  
  
  
  
    let fileBuffer = req.file.buffer; 
  
  
  
  
    await zlib.gzip(fileBuffer, (err, response) => { 
  
  
  
  
      if (err) { 
  
  
  
  
        console.log(err); 
  
  
  
  
      }      fs.writeFile(path.join(__dirname, destination), response, (err, data) => { 
  
  
  
  
        if (err) { 
  
  
  
  
          console.log(err); 
  
  
  
  
        }        res.download(path.join(__dirname, destination));      });    });  } catch (err) { 
  
  
  
  
    console.log(err); 
  
  
  
  
    res.json(err);  }}); 
 
 
 
 

我們定義 /compress 路由，這是一個 POST 請求，然后在該路由中傳遞Multer中間件。我們的 Multer 中間件將返回文件緩沖區(qū)，該文件緩沖區(qū)存儲在 fileBuffer 變量中。

為了進行測試，我們創(chuàng)建一個 compressed 目錄，在其中保存壓縮文件。

我們將使用Multer中間件來獲得我們想要壓縮的文件的名稱，以便我們可以將其保存到我們的 compressed 目錄中。

 
 
 
 

  
  
  
  
const destination = `compressed/${req.file.originalname}.gz`; 
 
 
 
 

我們使用Zlib方法 gzip 來壓縮文件，該方法將 fileBuffer 作為第一個參數(shù)，然后將一個回調(diào)函數(shù)作為第二個參數(shù)?；卣{(diào)函數(shù)由任何可能的錯誤和壓縮響應組成。

得到Zlib響應后，我們創(chuàng)建一個文件并將響應保存在 compressed 目錄中，該文件將具有 .gz文件擴展名，因為它用于標識Zlib壓縮。

現(xiàn)在，我們可以在開始前端之前在Postman上測試我們的應用程序，我將壓縮 package.lock.json 文件，它的大小是48kb。

壓縮文件可得到11kb。

現(xiàn)在我們的后端已經(jīng)準備好，我們可以為應用程序設置用戶界面。

讓我們在 compressor 根目錄內(nèi)創(chuàng)建一個 client 目錄。在 client 目錄中，創(chuàng)建兩個文件：index.html 和 main.js。

我們將從為應用程序定義用戶界面開始。

我們將搭建一個HTML 5樣板文件，然后在模板頭中添加vuei .js腳本、Bootstrap CSS CDN和Axios腳本。然后，我們將在body標記的末尾添加 main.js 文件。

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
   
  
  
  
  
   
  
  
  
  
  
  
  
  
  
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 
  
  
  
  
   
  
  
  
  
   
  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
    
壓縮