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

前提

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

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

設(shè)置項(xiàng)目

我們將從構(gòu)建后端開始，這是我們應(yīng)用程序的基礎(chǔ)。

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

我們先編寫后端服務(wù)，所以在項(xiàng)目中再建立一個(gè) server 目錄。

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

• koa、koa-router：這將有助于設(shè)置我們的服務(wù)器以及路由
• nodemon：當(dāng)我們對(duì)應(yīng)用程序進(jìn)行更改時(shí)，Nodemon將重新啟動(dòng)我們的服務(wù)器
• multer：用于上傳文件的中間件
• cors：幫助將headers添加到代理請(qǐng)求中

要安裝所有這些，請(qǐng)?jiān)谖覀儎?chuàng)建的 server 目錄中運(yùn)行以下命令：

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

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

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

讓我們繼續(xù)來創(chuàng)建一個(gè)簡(jiǎn)單的Koa.js服務(wù)器，然后配置我們的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)建一個(gè)Express的實(shí)例，并將其保存在一個(gè)變量中。我們使用Express實(shí)例來配置我們的 cors 作為中間件。

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

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

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 路由，這是一個(gè) POST 請(qǐng)求，然后在該路由中傳遞Multer中間件。我們的 Multer 中間件將返回文件緩沖區(qū)，該文件緩沖區(qū)存儲(chǔ)在 fileBuffer 變量中。

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

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

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

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

得到Zlib響應(yīng)后，我們創(chuàng)建一個(gè)文件并將響應(yīng)保存在 compressed 目錄中，該文件將具有 .gz文件擴(kuò)展名，因?yàn)樗糜跇?biāo)識(shí)Zlib壓縮。

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

壓縮文件可得到11kb。

實(shí)戰(zhàn)：在Node.js和Vue.js中構(gòu)建文件壓縮應(yīng)用程序 現(xiàn)在我們的后端已經(jīng)準(zhǔn)備好，我們可以為應(yīng)用程序設(shè)置用戶界面。

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

我們將從為應(yīng)用程序定義用戶界面開始。

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

?
"en">?
?
??"UTF-8">?
??"viewport"?content="width=device-width,?initial-scale=1.0">?
???
??"stylesheet"?href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"?
????????integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"?crossorigin="anonymous">?
???
???
?
?
??"app">?
????
壓縮
?
??