Related recommendations: "node js tutorial"

Node.js provides us with a module to assist in file compression. In this article, we will build an application where users can upload a file they want to compress and then download a compressed version of the file using the Node.js Zlib module.

Prerequisites

To continue with this tutorial, you need to have the following qualifications:

• Familiar with HTML, CSS and Javascript (ES6)
• VS Code or any code editor installed on your development machine
• Have Postman installed on your development machine
• The basics of Vue and Node.js

Setup Project

We will start by building the backend, which is the foundation of our application.

On the desktop, create a folder for the application, name itcompressor, and set up a new Node by runningnpm init -y. js project.

We write the back-end service first, so create anotherserverdirectory in the project.

Now we need to install the necessary packages for the application:

• koa, koa-router: This will help For setting up our server and routing
• nodemon: When we make changes to the application, Nodemon will restart our server
• multer:Middleware for uploading files
• cors:Help adding headers to proxy requests

To install them all, install them in the ## Run the following command in the ##serverdirectory:

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

index.jsfile in theserverdirectory. This is what we will Where the backend code is written.

.gitignorefile and addnode_modulesto it, this will prevent thenode_modulesfolder from being added to git.

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'); });

corsas middleware.

zlib, which we will use to do the actual compression. We then use an instance of Express to create a server that will listen on port3000.

gzipmethod.

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); } });

/compressroute, which is aPOSTrequest, and then pass the Multer middleware in that route. OurMultermiddleware will return the file buffer, which is stored in thefileBuffervariable.

compresseddirectory and save the compressed files in it.

compresseddirectory.

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

gzipto compress the file, which takesfileBufferas the first parameter and then a callback function as the second parameter. The callback function consists of any possible errors and compressed responses.

compresseddirectory, the file will have the.gzfile extension because it is used Identifies Zlib compression.

package.lock.jsonfile, its size is 48kb.

clientdirectory inside thecompressorroot directory. In theclientdirectory, create two files:index.htmlandmain.js.

main.jsfile at the end of the body tag.

nbsp;html>       
 
压缩
 

对于此应用程序，用户将通过拖放添加其文件。让我们为我们的应用程序定义一个简单的用户界面。

修改模板为：

nbsp;html>        
 
 
 
 
 
在这里拖放

• FileName -> File Size X

你可以使用任何实时服务器运行你的应用程序，这里我使用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) }); }

使用这种方法，放置在框中的所有文件都将记录在我们的控制台上。

但是，我们想在框内显示文件，因此我们必须将

removeFile(file) { this.files = this.files.filter(f => { return f != file; }); },

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) }) }

  压缩 

filters: { kb(val) { return Math.floor(val / 1024); } },

{{ file.size | kb }} kb