实战：在Node.js和Vue.js中构建文件压缩应用程序
共 5546字，需浏览 12分钟
·
2021-01-27 00:46
作者：晨曦
原文：https://mp.weixin.qq.com/s/zwmYlKE2ZTo0IftyTqlA7Q
Node.js为我们提供了一个模块来协助文件压缩。在本文中，我们将构建一个应用程序，用户可以在该应用程序中上传他们想要压缩的文件，然后使用Node.js Zlib模块下载该文件的压缩版本。
前提
要继续学习本教程，你需要具备以下条件：
熟悉HTML，CSS和Javascript(ES6 +) VS Code或开发计算机上安装的任何代码编辑器 在你的开发机器上安装了Postman Vue和Node.js的基础知识
设置项目
我们将从构建后端开始，这是我们应用程序的基础。
在桌面上，为应用程序创建一个文件夹，群殴取名为 compressor，并通过运行 npm init -y设置一个新的Node.js项目。
我们先编写后端服务，所以在项目中再建立一个 server 目录。
现在，我们需要为应用程序安装必要的软件包：
koa、koa-router：这将有助于设置我们的服务器以及路由 nodemon：当我们对应用程序进行更改时，Nodemon将重新启动我们的服务器 multer：用于上传文件的中间件 cors：帮助将headers添加到代理请求中
要安装所有这些，请在我们创建的 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 文件。
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
Vue Compressor
"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
"app">
压缩