實戰：在Node.js和Vue.js中構建文件壓縮應用程序

時間  2020-09-29
標籤 實戰 node.js node vue.js vue 構建 文件 壓縮 應用 程序 欄目 Node.js 简体版
原文   原文鏈接

Node.js爲咱們提供了一個模塊來協助文件壓縮。在本文中，咱們將構建一個應用程序，用戶能夠在該應用程序中上傳他們想要壓縮的文件，而後使用Node.js Zlib模塊下載該文件的壓縮版本。javascript

前提

要繼續學習本教程，你須要具有如下條件：css

  • 熟悉HTML，CSS和Javascript（ES6 +）
  • VS Code或開發計算機上安裝的任何代碼編輯器
  • 在你的開發機器上安裝了Postman
  • Vue和Node.js的基礎知識

設置項目

咱們將從構建後端開始，這是咱們應用程序的基礎。html

在桌面上，爲應用程序建立一個文件夾，羣毆取名爲 compressor，並經過運行 npm init -y 設置一個新的Node.js項目。 前端

咱們先編寫後端服務，因此在項目中再創建一個 server 目錄。vue

如今，咱們須要爲應用程序安裝必要的軟件包：java

  • koa、koa-router：這將有助於設置咱們的服務器以及路由
  • nodemon：當咱們對應用程序進行更改時，Nodemon將從新啓動咱們的服務器
  • multer：用於上傳文件的中間件
  • cors：幫助將headers添加到代理請求中

要安裝全部這些，請在咱們建立的 server 目錄中運行如下命令：node

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

完成安裝後，在 server 目錄內建立一個 index.js 文件，這是咱們將編寫後端代碼的地方。ios

使用VS Code打開文件夾。在開始以前，咱們先建立一個 .gitignore 文件，並向其中添加 node_modules，這將防止將node_modules 文件夾添加到git中。git

讓咱們繼續來建立一個簡單的Koa.js服務器，而後配置咱們的packages：github

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。

壓縮文件可獲得11kb。

如今咱們的後端已經準備好，咱們能夠爲應用程序設置用戶界面。

讓咱們在 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>
  <div id="app">
    <h1>壓縮</h1>
  </div>
  <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>
<div id="app">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div 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>
        </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>

你可使用任何實時服務器運行你的應用程序，這裏我使用 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}}。

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

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

單擊咱們的壓縮按鈕將觸發文件下載：

就是這樣！

咱們只是創建了一個簡單的壓縮應用程序。最後咱們很想添加一個簡單的方法，經過建立一個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

首發於公衆號《前端全棧開發者》，第一時間閱讀最新文章，會優先兩天發表新文章。關注後私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！
image

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程