您好,登錄后才能下訂單哦!
使用Node.js和Vue.js怎么構(gòu)建一個(gè)文件壓縮應(yīng)用程序,相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
設(shè)置項(xiàng)目
我們將從構(gòu)建后端開(kāi)始,這是我們應(yīng)用程序的基礎(chǔ)。
在桌面上,為應(yīng)用程序創(chuàng)建一個(gè)文件夾,群毆取名為 compressor,并通過(guò)運(yùn)行 npm init -y設(shè)置一個(gè)新的Node.js項(xiàng)目。
我們先編寫(xiě)后端服務(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 文件,這是我們將編寫(xiě)后端代碼的地方。
使用VS Code打開(kāi)文件夾。在開(kāi)始之前,我們先創(chuàng)建一個(gè) .gitignore 文件,并向其中添加 node_modules,這將防止將node_modules 文件夾添加到git中。
讓我們繼續(xù)來(lái)創(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í)例來(lái)配置我們的 cors 作為中間件。
我們還需要一些Node.js的核心模塊,比如 zlib,我們將使用它來(lái)進(jìn)行實(shí)際的壓縮。然后我們使用Express的實(shí)例來(lái)創(chuàng)建一個(gè)服務(wù)器,它將監(jiān)聽(tīng) 3000 端口。
接下來(lái),我們將創(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中間件來(lái)獲得我們想要壓縮的文件的名稱,以便我們可以將其保存到我們的 compressed 目錄中。
const destination = `compressed/${req.file.originalname}.gz`;
我們使用Zlib方法 gzip 來(lái)壓縮文件,該方法將 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)在,我們可以在開(kāi)始前端之前在Postman上測(cè)試我們的應(yīng)用程序,我將壓縮 package.lock.json 文件,它的大小是48kb。
壓縮文件可得到11kb。
現(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)用程序定義用戶界面開(kāi)始。
我們將搭建一個(gè)HTML 5樣板文件,然后在模板頭中添加vuei .js腳本、Bootstrap CSS CDN和Axios腳本。然后,我們將在body標(biāo)記的末尾添加 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"> <h2>壓縮</h2> </div> <script src="main.js"></script> </body> </html>
對(duì)于此應(yīng)用程序,用戶將通過(guò)拖放添加其文件。讓我們?yōu)槲覀兊膽?yīng)用程序定義一個(gè)簡(jiǎn)單的用戶界面。
修改模板為:
<!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 h5 { 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"> <h5>在這里拖放</h5> <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>
你可以使用任何實(shí)時(shí)服務(wù)器運(yùn)行你的應(yīng)用程序,這里我使用 live-server。
拖放功能
我們先在 main.js 文件中定義我們的Vue.js實(shí)例。然后,我們將創(chuàng)建一個(gè)state來(lái)保存我們的文件。
const app = new Vue({ el: '#app', data: { files: [], loading:false }, methods: { addFile(e) { }, removeFile(file) { }, compressFile() { } }})
在Vue中實(shí)現(xiàn)拖放,我們需要添加一個(gè) @drop 事件來(lái)選擇我們的文件,還有一個(gè) v-cloak 屬性,這個(gè)屬性用于在應(yīng)用加載之前隱藏 {{tags}}。
<div class="wrapper mt-5 p-3" v-cloak @drop="addFile" @drop.prevent> <h5>在這里拖放</h5> </div>
@drop 事件監(jiān)聽(tīng) addFile 方法,我們必須定義:
addFile(e) { let files = e.dataTransfer.files; [...files].forEach(file => { this.files.push(file); console.log(this.files) });}
使用這種方法,放置在框中的所有文件都將記錄在我們的控制臺(tái)上。
但是,我們想在框內(nèi)顯示文件,因此我們必須將<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>
這樣,每當(dāng)我們將文件放入框中時(shí),都會(huì)顯示文件名和大小。
我們可以通過(guò)向 X 按鈕添加點(diǎn)擊事件來(lái)添加額外的功能,以從框中刪除文件:@click = ‘removeFile(file)’。
然后,我們定義 removeFile 方法:
removeFile(file) { thisthis.files = this.files.filter(f => { return f != file; });},
讓我們定義壓縮函數(shù),該函數(shù)將壓縮所選文件,這就是Axios的作用所在。我們將向我們?cè)诤蠖硕x的 /compress 路由發(fā)出請(qǐng)求:
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 上傳文件。上載文件后,后端會(huì)壓縮文件并將壓縮后的文件返回給我們。
我們使用 URL.createObjectURL 創(chuàng)建一個(gè) DOMstring,其中包含表示給定對(duì)象的URL。然后,我們從后端下載給定的數(shù)據(jù)。
現(xiàn)在,我們需要在compress按鈕中添加一個(gè)click事件,以偵聽(tīng)我們創(chuàng)建的方法:
<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>
單擊我們的壓縮按鈕將觸發(fā)文件下載:
就是這樣!
我們只是建立了一個(gè)簡(jiǎn)單的壓縮應(yīng)用程序。最后我們很想添加一個(gè)簡(jiǎn)單的方法,通過(guò)創(chuàng)建一個(gè)Vue.js過(guò)濾器,將我們的文件大小以千字節(jié)為單位進(jìn)行格式化。
filters: { kb(val) { return Math.floor(val / 1024); }},
在模板中使用
{{ file.size | kb }} kb
看完上述內(nèi)容,你們掌握使用Node.js和Vue.js怎么構(gòu)建一個(gè)文件壓縮應(yīng)用程序的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。