欧美生活电影网一区二区在线观看,可以免费看电影网站亚洲无码,亚洲色图无码播放

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

實(shí)戰(zhàn)：在Node.js和Vue.js中構(gòu)建文件壓縮應(yīng)用程序

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供上城企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為上城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

前提

要繼續(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，并通過運(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)我們對應(yīng)用程序進(jìn)行更改時(shí)，Nodemon將重新啟動(dòng)我們的服務(wù)器
multer：用于上傳文件的中間件
cors：幫助將headers添加到代理請求中

要安裝所有這些，請?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ù)來創(chuàng)建一個(gè)簡單的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í)例來配置我們的 cors 作為中間件。

我們還需要一些Node.js的核心模塊，比如 zlib，我們將使用它來進(jìn)行實(shí)際的壓縮。然后我們使用Express的實(shí)例來創(chuàng)建一個(gè)服務(wù)器，它將監(jiān)聽 3000 端口。

接下來，我們將創(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 請求，然后在該路由中傳遞Multer中間件。我們的 Multer 中間件將返回文件緩沖區(qū)，該文件緩沖區(qū)存儲(chǔ)在 fileBuffer 變量中。

為了進(jìn)行測試，我們創(chuàng)建一個(gè) compressed 目錄，在其中保存壓縮文件。

我們將使用Multer中間件來獲得我們想要壓縮的文件的名稱，以便我們可以將其保存到我們的 compressed 目錄中。

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

我們使用Zlib方法 gzip 來壓縮文件，該方法將 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上測試我們的應(yīng)用程序，我將壓縮 package.lock.json 文件，它的大小是48kb。

壓縮文件可得到11kb。

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

讓我們在 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 文件。

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
     
  
  
  
     
  
  
  
    Vue Compressor 
  
  
  
    
  
  
  
  
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 
  
  
  
     
  
  
  
     
  
  
  
   
  
  
  
   
  
  
  
     
  
  
  
      壓縮

對于此應(yīng)用程序，用戶將通過拖放添加其文件。讓我們?yōu)槲覀兊膽?yīng)用程序定義一個(gè)簡單的用戶界面。

修改模板為：

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
     
  
  
  
     
  
  
  
    Vue Compressor 
  
  
  
    
  
  
  
  
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
     
  
  
  
       
  
  
  
         
  
  
  
           
  
  
  
            在這里拖放
 
  
  
  
             
  
  
  
              FileName -> File Size X

壓縮

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

拖放功能

我們先在 main.js 文件中定義我們的Vue.js實(shí)例。然后，我們將創(chuàng)建一個(gè)state來保存我們的文件。

 
 
 
 
  
  
  
  const app = new Vue({ 
  
  
  
    el: '#app', 
  
  
  
    data: {    files: [],    loading:false 
  
  
  
    },  methods: {    addFile(e) {    },    removeFile(file) {    },    compressFile() {    }  }})

在Vue中實(shí)現(xiàn)拖放，我們需要添加一個(gè) @drop 事件來選擇我們的文件，還有一個(gè) v-cloak 屬性，這個(gè)屬性用于在應(yīng)用加載之前隱藏 {{tags}}。

@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)顯示文件，因此我們必須將

元素修改為：

 
 
 
 
  
  
  
   
  
  
  
    {{ file.name }}-{{ file.size }} kbX

這樣，每當(dāng)我們將文件放入框中時(shí)，都會(huì)顯示文件名和大小。

我們可以通過向 X 按鈕添加點(diǎn)擊事件來添加額外的功能，以從框中刪除文件：@click = ‘removeFile(file)’。

然后，我們定義 removeFile 方法：

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

讓我們定義壓縮函數(shù)，該函數(shù)將壓縮所選文件，這就是Axios的作用所在。我們將向我們在后端定義的 /compress 路由發(fā)出請求：

 
 
 
 
  
  
  
  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，其中包含表示給定對象的URL。然后，我們從后端下載給定的數(shù)據(jù)。

現(xiàn)在，我們需要在compress按鈕中添加一個(gè)click事件，以偵聽我們創(chuàng)建的方法：

 
 
 
 
  
  
  
    
  
  
  
    
  
  
  
  
        role="status" v-if="loading" 
  
  
  
          aria-hidden="true"> 
  
  
  
    壓縮

單擊我們的壓縮按鈕將觸發(fā)文件下載：

就是這樣!

我們只是建立了一個(gè)簡單的壓縮應(yīng)用程序。最后我們很想添加一個(gè)簡單的方法，通過創(chuàng)建一個(gè)Vue.js過濾器，將我們的文件大小以千字節(jié)為單位進(jìn)行格式化。

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

在模板中使用

 
 
 
 
  
  
  
  {{ file.size | kb }} kb

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

源碼

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

網(wǎng)頁名稱：實(shí)戰(zhàn)：在Node.js和Vue.js中構(gòu)建文件壓縮應(yīng)用程序
標(biāo)題來源：http://m.jiaoqi3.com/article/djosdss.html

新聞中心

壓縮

在這里拖放

在這里拖放

其他資訊