Node.js為我們提供了一個模塊來協助文件壓縮。在本文中，我們將構建一個應用程式，用戶可以在該應用程式中上傳他們想要壓縮的文件，然後使用Node.js Zlib模塊下載該文件的壓縮版本。
前提要繼續學習本教程，你需要具備以下條件：
熟悉HTML，CSS和Javascript(ES6 +)設置項目我們將從構建後端開始，這是我們應用程式的基礎。
在桌面上，為應用程式創建一個文件夾，群毆取名為 compressor，並通過運行 npm init -y設置一個新的Node.js項目。
我們先編寫後端服務，所以在項目中再建立一個 server 目錄。
現在，我們需要為應用程式安裝必要的軟體包：
koa、koa-router：這將有助於設置我們的伺服器以及路由nodemon：當我們對應用程式進行更改時，Nodemon將重新啟動我們的伺服器要安裝所有這些，請在我們創建的 server 目錄中運行以下命令：
npm i --save koa koa-router nodemon multer cors完成安裝後，在 server 目錄內創建一個 index.js 文件，這是我們將編寫後端代碼的地方。
使用VS Code打開文件夾。在開始之前，我們先創建一個 .gitignore 文件，並向其中添加 node_modules，這將防止將node_modules 文件夾添加到git中。
讓我們繼續來創建一個簡單的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。然後，我們創建一個Express的實例，並將其保存在一個變量中。我們使用Express實例來配置我們的 cors 作為中間件。
我們還需要一些Node.js的核心模塊，比如 zlib，我們將使用它來進行實際的壓縮。然後我們使用Express的實例來創建一個伺服器，它將監聽 3000 埠。
接下來，我們將創建一個路由，該路由將接收一個文件，然後返回壓縮文件。
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 中間件將返回文件緩衝區，該文件緩衝區存儲在 fileBuffer 變量中。
為了進行測試，我們創建一個 compressed 目錄，在其中保存壓縮文件。
我們將使用Multer中間件來獲得我們想要壓縮的文件的名稱，以便我們可以將其保存到我們的 compressed 目錄中。
const destination = `compressed/${req.file.originalname}.gz`;我們使用Zlib方法 gzip 來壓縮文件，該方法將 fileBuffer 作為第一個參數，然後將一個回調函數作為第二個參數。回調函數由任何可能的錯誤和壓縮響應組成。
得到Zlib響應後，我們創建一個文件並將響應保存在 compressed 目錄中，該文件將具有 .gz文件擴展名，因為它用於標識Zlib壓縮。
現在，我們可以在開始前端之前在Postman上測試我們的應用程式，我將壓縮 package.lock.json 文件，它的大小是48kb。
壓縮文件可得到11kb。
實戰：在Node.js和Vue.js中構建文件壓縮應用程式 現在我們的後端已經準備好，我們可以為應用程式設置用戶界面。
讓我們在 compressor 根目錄內創建一個 client 目錄。在 client 目錄中，創建兩個文件：index.html 和 main.js。
我們將從為應用程式定義用戶界面開始。
我們將搭建一個HTML 5樣板文件，然後在模板頭中添加vuei .js腳本、Bootstrap CSS CDN和Axios腳本。然後，我們將在body標記的末尾添加 main.js 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Compressor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>壓縮</h1>
</div>
<script src="main.js"></script>
</body>
</html>對於此應用程式，用戶將通過拖放添加其文件。讓我們為我們的應用程式定義一個簡單的用戶界面。
修改模板為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Compressor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
body {
background: #ccc !important;
}
.wrapper {
width: 350px;
height: 350px;
border: 2px dotted gray
}
.wrapper h4 {
text-align: center;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="wrapper mt-5 p-3">
<h4>在這裡拖放</h4>
<ul class="list-group mt-5">
<li class="list-group-item">FileName -> File Size <button class="btn btn-sm btn-danger">X</button></li>
</ul>
</div>
<button class="btn btn-primary my-4">
<span class="spinner-border spinner-border-sm" role="status" v-if="loading" aria-hidden="true"></span>
壓縮 </button>
</div>
</div>
</div>
</div>
<script src=" main.js"></script>
</body>你可以使用任何實時伺服器運行你的應用程式，這裡我使用 live-server。
實戰：在Node.js和Vue.js中構建文件壓縮應用程式
拖放功能我們先在 main.js 文件中定義我們的Vue.js實例。然後，我們將創建一個state來保存我們的文件。
const app = new Vue({
el: '#app',
data: { files: [], loading:false
}, methods: { addFile(e) { }, removeFile(file) { }, compressFile() { } }})在Vue中實現拖放，我們需要添加一個 @drop 事件來選擇我們的文件，還有一個 v-cloak 屬性，這個屬性用於在應用加載之前隱藏 {{tags}}。
<div class="wrapper mt-5 p-3" v-cloak @drop="addFile" @drop.prevent>
<h4>在這裡拖放</h4>
</div>@drop 事件監聽 addFile 方法，我們必須定義：
addFile(e) {
let files = e.dataTransfer.files;
[...files].forEach(file => {
this.files.push(file);
console.log(this.files)
});}使用這種方法，放置在框中的所有文件都將記錄在我們的控制臺上。
但是，我們想在框內顯示文件，因此我們必須將<li>元素修改為：
<li v-for="(file,id) in files" :key="id" class="list-group-item">
{{ file.name }}-{{ file.size }} kb<button class="btn btn-sm btn-danger">X</button>
</li>這樣，每當我們將文件放入框中時，都會顯示文件名和大小。
我們可以通過向 X 按鈕添加點擊事件來添加額外的功能，以從框中刪除文件：@click = 『removeFile(file)』。
然後，我們定義 removeFile 方法：
removeFile(file) {
thisthis.files = this.files.filter(f => {
return f != file;
});},讓我們定義壓縮函數，該函數將壓縮所選文件，這就是Axios的作用所在。我們將向我們在後端定義的 /compress 路由發出請求：
compressFile() {
this.loading = true;
let formdata = new FormData();
formdata.append('file', this.files[0])
axios.post('http://localhost:3000/compress', formdata, {
responseType: 'blob'
}).then(response => {
let fileURL = window.URL.createObjectURL(new Blob([(response.data)]))
let fileLink = document.createElement('a');
fileLink.href = fileURL; fileLink.setAttribute('download', `${this.files[0].name}.gz`);
document.body.appendChild(fileLink);
fileLink.click(); this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err)
})}我們使用 FormData 上傳文件。上載文件後，後端會壓縮文件並將壓縮後的文件返回給我們。
我們使用 URL.createObjectURL 創建一個 DOMstring，其中包含表示給定對象的URL。然後，我們從後端下載給定的數據。
現在，我們需要在compress按鈕中添加一個click事件，以偵聽我們創建的方法：
<button class="btn btn-primary my-4" @click="compressFile">
<span class="spinner-border spinner-border-sm"
role="status" v-if="loading"
aria-hidden="true"></span>
壓縮 </button>單擊我們的壓縮按鈕將觸發文件下載：
實戰：在Node.js和Vue.js中構建文件壓縮應用程式 就是這樣!
我們只是建立了一個簡單的壓縮應用程式。最後我們很想添加一個簡單的方法，通過創建一個Vue.js過濾器，將我們的文件大小以千字節為單位進行格式化。
filters: {
kb(val) {
return Math.floor(val / 1024);
}},在模板中使用
{{ file.size | kb }} kb這會將文件的大小格式化為更易讀的格式。
總結Node.js使文件壓縮變得容易。它可以進一步用於壓縮HTTP請求和響應，以提高應用程式性能。要獲得更多Zlib功能，可以查看Zlib上的Node.js文檔。
1.看到這裡了就點個在看支持下吧，你的「點讚，在看」是我創作的動力。
2.關注公眾號
程式設計師成長指北，回復「1」加入高級前端交流群！「在這裡有好多 前端 開發者，會討論 前端 Node 知識，互相學習」！3.也可添加微信【ikoala520】，一起成長。
「在看轉發」是最大的支持