web前端|js教程
前端,node.js,vue.js,express
web前端-js教程
锁机开发源码,更改VSCode编码,vm虚拟机装ubuntu,tomcat配置时间,苹果导出sqlite,低价vps服务器,jq移动端分享插件,前端框架教程 pdf,爬虫 推荐,抖店php,专业seo培训班,dz社交网站模板,即时聊天网页,个人博客静态模板,静态网页搜索当前页面内容功能,微信建站管理系统,易语言 谷歌浏览器扩展程序lzw
《node js教学》
html5来电源码,mpe vscode,ubuntu 文件夹加密,tomcat阿里,sqlite系统安装,域名备案要买服务器吗,提示声音插件,图表化前端框架,node 写爬虫,短期php培训学校,济南seo负面,网站活动专题模板,在线网页聊天html模板,免费瀑布流模板下载,帝国cms重新生成页面,oa管理系统ui界面设计,vb程序设计编程简单日历lzw
Node.js为我们提供了一个模块来协助文件压缩。在本文中，我们将构建一个应用程序，用户可以在该应用程序中上传他们想要压缩的文件，然后使用Node.js Zlib模块下载该文件的压缩版本。
android流量控制源码,ubuntu里安装git,爬虫技术换个说法,谷歌PHP,seo优化bannerlzw
前提
要继续学习本教学，你需要具备以下条件：
熟悉HTML，CSS和Javascript（ES6 +）VS Code或开发计算机上安装的任何代码编辑器在你的开发机器上安装了PostmanVue和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());//multerconst 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。
现在我们的后端已经准备好，我们可以为应用程序设置用户界面。
让我们在compressor根目录内创建一个client目录。在client目录中，创建两个文件：index.html和main.js。
我们将从为应用程序定义用户界面开始。
我们将搭建一个HTML 5样板文件，然后在模板头中添加vuei .js脚本、Bootstrap CSS CDN和Axios脚本。然后，我们将在body标记的末尾添加main.js文件。
压缩
对于此应用程序，用户将通过拖放添加其文件。让我们为我们的应用程序定义一个简单的用户界面。
修改模板为：
在这里拖放
FileName -> File Size
你可以使用任何实时服务器运行你的应用程序，这里我使用live-server。
拖放功能
我们先在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}}。
在这里拖放
@drop事件监听addFile方法，我们必须定义:
addFile(e) { let files = e.dataTransfer.files; [...files].forEach(file => { this.files.push(file); console.log(this.files) });}
使用这种方法，放置在框中的所有文件都将记录在我们的控制台上。
但是，我们想在框内显示文件，因此我们必须将
元素修改为：
{{ file.name }}-{{ file.size }} kb
这样，每当我们将文件放入框中时，都会显示文件名和大小。
我们可以通过向X按钮添加点击事件来添加额外的功能，以从框中删除文件：@click = ‘removeFile(file)’。
然后，我们定义removeFile方法：
removeFile(file) { this.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: lob }).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事件，以侦听我们创建的方法：
单击我们的压缩按钮将触发文件下载：
就是这样！
我们只是建立了一个简单的压缩应用程序。最后我们很想添加一个简单的方法，通过创建一个Vue.js过滤器，将我们的文件大小以千字节为单位进行格式化。
filters: { kb(val) { return Math.floor(val / 1024); }},
在模板中使用
{{ file.size | kb }} kb
这会将文件的大小格式化为更易读的格式。
源码
Node.js使文件压缩变得容易。它可以进一步用于压缩HTTP请求和响应，以提高应用程序性能。要获得更多Zlib功能，可以查看Zlib上的Node.js文档。
源代码：/dunizb/CodeTest/tree/master/Node/compressor
编程入门！！
如果觉得《使用Node.js+Vue.js来构建文件压缩应用程序》对你有帮助，请点赞、收藏，并留下你的观点哦！
