如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)宜興免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Node.js為我們提供了一個(gè)模塊來(lái)協(xié)助文件壓縮。在本文中，我們將構(gòu)建一個(gè)應(yīng)用程序，用戶可以在該應(yīng)用程序中上傳他們想要壓縮的文件，然后使用Node.js Zlib模塊下載該文件的壓縮版本。

前提

要繼續(xù)學(xué)習(xí)本教程，你需要具備以下條件：

  • 熟悉HTML，CSS和Javascript（ES6 +）

  • VS Code或開發(fā)計(jì)算機(jī)上安裝的任何代碼編輯器

  • 在你的開發(fā)機(jī)器上安裝了Postman

  • Vue和Node.js的基礎(chǔ)知識(shí)

設(shè)置項(xiàng)目

我們將從構(gòu)建后端開始，這是我們應(yīng)用程序的基礎(chǔ)。

在桌面上，為應(yīng)用程序創(chuàng)建一個(gè)文件夾，群毆取名為compressor，并通過(guò)運(yùn)行npm init -y 設(shè)置一個(gè)新的Node.js項(xiàng)目。

我們先編寫后端服務(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 文件，這是我們將編寫后端代碼的地方。

使用VS Code打開文件夾。在開始之前，我們先創(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)聽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)在，我們可以在開始前端之前在Postman上測(cè)試我們的應(yīng)用程序，我將壓縮package.lock.json 文件，它的大小是48kb。

如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序

壓縮文件可得到11kb。

如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序

現(xiàn)在我們的后端已經(jīng)準(zhǔn)備好，我們可以為應(yīng)用程序設(shè)置用戶界面。

讓我們?cè)?code>compressor 根目錄內(nèi)創(chuàng)建一個(gè)client 目錄。在client 目錄中，創(chuàng)建兩個(gè)文件：index.html 和main.js。

我們將從為應(yīng)用程序定義用戶界面開始。

我們將搭建一個(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>
  <p id="app">
    <h2>壓縮</h2>
  </p>
  <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>
<p id="app">
  <p class="container">
    <p class="row">
      <p class="col-md-12">
        <p 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>
        </p>
        <button class="btn btn-primary my-4">  
          <span class="spinner-border spinner-border-sm" role="status" v-if="loading" aria-hidden="true"></span>
          壓縮
        </button>
      </p>
    </p>
  </p>
</p>
  <script src=" main.js"></script>
</body>

你可以使用任何實(shí)時(shí)服務(wù)器運(yùn)行你的應(yīng)用程序，這里我使用live-server。

如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序

拖放功能

我們先在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}}。

<p class="wrapper mt-5 p-3" v-cloak @drop.prevent="addFile">
  <h5>在這里拖放</h5>
</p>

@drop 事件監(jiān)聽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) {
  this.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事件，以偵聽我們創(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ā)文件下載：

如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序

就是這樣！

我們只是建立了一個(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

這會(huì)將文件的大小格式化為更易讀的格式。

源碼

Node.js使文件壓縮變得容易。它可以進(jìn)一步用于壓縮HTTP請(qǐng)求和響應(yīng)，以提高應(yīng)用程序性能。要獲得更多Zlib功能，可以查看Zlib上的Node.js文檔。

源代碼：https://github.com/dunizb/CodeTest/tree/master/Node/compressor

原文地址：https://blog.logrocket.com/build-a-file-compression-application-in-node-js-and-vue-js/

相關(guān)推薦：


2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020新的5個(gè)vue.js視頻教程精選

關(guān)于如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文題目：如何使用Node.js+Vue.js來(lái)構(gòu)建文件壓縮應(yīng)用程序-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article6/dihsig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站維護(hù)、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷型網(wǎng)站建設(shè)