技術文章 » 使用Node.js+Vue.js來構建檔案壓縮應用程式

使用Node.js+Vue.js來構建檔案壓縮應用程式

2020-11-25 21:01:07

相關推薦：《》

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。

2.png

壓縮檔案可得到11kb。

3.png

現在我們的後端已經準備好，我們可以為應用程式設定使用者介面。

讓我們在 compressor 根目錄內建立一個 client 目錄。在 client 目錄中，建立兩個檔案：index.html 和 main.js。

我們將從為應用程式定義使用者介面開始。

我們將搭建一個HTML 5樣板檔案，然後在模板頭中新增vuei .js指令碼、Bootstrap CSS CDN和Axios指令碼。然後，我們將在body標記的末尾新增 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">
    <h1>壓縮</h1>
  </p>
  <script src="main.js"></script>
</body>
</html>

對於此應用程式，使用者將通過拖放新增其檔案。讓我們為我們的應用程式定義一個簡單的使用者介面。

修改模板為：

<!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 h4 {
      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">
          <h4>在這裡拖放</h4>
          <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>

你可以使用任何實時伺服器執行你的應用程式，這裡我使用 live-server 。

4.png

拖放功能

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

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

@drop 事件監聽 addFile 方法，我們必須定義:

addFile(e) {
  let files = e.dataTransfer.files;
  [...files].forEach(file => {
    this.files.push(file);
    console.log(this.files)
  });
}

使用這種方法，放置在框中的所有檔案都將記錄在我們的控制檯上。

但是，我們想在框內顯示檔案，因此我們必須將 <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>

這樣，每當我們將檔案放入框中時，都會顯示檔名和大小。

我們可以通過向 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: '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 上傳檔案。上載檔案後，後端會壓縮檔案並將壓縮後的檔案返回給我們。

我們使用 URL.createObjectURL 建立一個 DOMstring，其中包含表示給定物件的URL。然後，我們從後端下載給定的資料。

現在，我們需要在compress按鈕中新增一個click事件，以偵聽我們建立的方法：

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

單擊我們的壓縮按鈕將觸發檔案下載：

5.png

就是這樣！

我們只是建立了一個簡單的壓縮應用程式。最後我們很想新增一個簡單的方法，通過建立一個Vue.js過濾器，將我們的檔案大小以千位元組為單位進行格式化。

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

在模板中使用

{{ file.size | kb }} kb

這會將檔案的大小格式化為更易讀的格式。

原始碼

Node.js使檔案壓縮變得容易。它可以進一步用於壓縮HTTP請求和響應，以提高應用程式效能。要獲得更多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/

相關推薦：

更多程式設計相關知識，請存取：！！

以上就是使用Node.js+Vue.js來構建檔案壓縮應用程式的詳細內容，更多請關注TW511.COM其它相關文章！