jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

安装jszip

需用到 jszip/dist下的 jszip.min.js 文件以及 jszip/vendor 下的 FileSaver.js 文件。

npm install jszip --save

简单的使用示例

let JSZip = require("jszip"); 
let saveAs = require("jszip/vendor/FileSaver.js");
//创建一个JSZip实例
let zip = new JSZip();

// 使用.file(fileName,fileContent)添加一个txt文件
zip.file("Hello.txt", "Hello World\n");

// 使用.folder(folderName)添加一个文件夹
let img = zip.folder("images");

// 使用.file(fileName,fileContent,base64FLag)在文件夹下添加一个图片文件 fileContent可以是File文件也可以是Blob二进制数据
img.file("smile.gif", imgData, {base64: true});

// 生成一个zip文件
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

::: info type:"blob" 压缩的结果为二进制流,可用作文件上传 saveAs(content, "example.zip") 直接在浏览器打成example.zip包并下载，saveAs依赖的js是FileSaver.js :::

Vue中使用jszip压缩文件夹，nodeJs接收保存

前端关键代码示例

let JSZip = require("jszip"); 
export default {
    data() {
    return {
      file: []
    };
  },
  created() { 
    let zip = new JSZip();
    this.file.forEach((item) => {
      let arrPath = item.webkitRelativePath.split("/");
      if (arrPath.length > 2) {
        arrPath = arrPath.slice(1, arrPath.length - 1);
        let folder = zip.folder(arrPath.join("/"));
        folder.file(item.name, item);
      } else {
        zip.file(item.name, item);
      }
    });
    zip.generateAsync({
        // 压缩类型选择nodebuffer，在回调函数中会返回zip压缩包的Buffer的值，再利用fs保存至本地
        type: "Blob",
        // 压缩算法
        compression: "DEFLATE",
        compressionOptions: {
          level: 9,
        },
      })
      .then((content) => {
       
        let formData = new FormData();
        formData.append("file", content);
        console.log(formData);
        // let formData = new FormData();
        // formData.append("file", content, "test.zip");
        this.$request
          .post("/saveZip", formData, {
            headers: {
              "www-name": this.www,
              "commit-bid": this.commitBid,
            },
          })
          .then((res) => {
           
          });
      });
  }
}

node 后端关键代码示例

const express = require('express');
const fs = require('fs');
const path = require('path');
const router = express.Router();
const compressing = require('compressing');
const multer = require('multer');

router.post('/saveZip', multer().single('file'), (req, res, next) => {
    let buffer = req.file.buffer
    let wwwName = req.get('www-name');
    let commitBid = req.get('commit-bid');
    
    // 接收到后直接解压到指定目录
    compressing.zip.uncompress(buffer, `./dist`)
        .then(data => {
            console.log(data);
            let message = "Zip文件上传并解压成功！"
            res.json({ code: 200, message });
            console.log(message)
        }).catch(err => {
            let message = "Zip文件上传并解压失败！"
            res.json({ code: 500, message });
            console.log(message)
            console.log(err);
        })
    
    // 将接收到的压缩文件保存到指定文件夹
    fs.writeFile(path.join(__dirname, `./dist/sd.zip`), buffer, function (err) {
        console.log(err);
    });
});

官方文档

jszip：https://stuk.github.io/jszip/ (opens new window) GitHub：https://github.com/Stuk/jszip (opens new window)