[TOC] [jszip官網](https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html) ### 1. 安裝 ~~~ npm install jszip yarn add jszip // 親測有效 ~~~ ### 2. 引入 ~~~ import JSZip from 'jszip'; import * as JSZip from 'jszip'; // 親測有效 ~~~ ### 3. 使用 ~~~ let zipFile: JSZip = new JSzip(); ~~~ ### 4. 示例 [示例1](https://codepen.io/a631807682/pen/EMEKoL?editors=1011) ~~~ <input type="file" id="test" onchange="zipFiles(this)" multiple="multiple" webkitdirectory /> function zipFiles(dom){ let zip = new JSZip(); for(let f of dom.files){ zip.file(f.webkitRelativePath, f); } zip.generateAsync({type:"blob"}) .then(function (blob) { const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = 'test.zip'; link.click(); }); } ~~~ 示例2 ~~~ // webkitdirectory控制是否為上傳文件夾 <input type="file" class="add-file-input" v-if="dataForm.type === 'GDB' || dataForm.type === 'SHAPE'" @change="zipFiles" multiple="multiple" webkitdirectory /> // 上傳文件夾、多選文件打包上傳 zipFiles(e) { const { files } = e.target let flag = false const zip = new JSZip() for (let index = 0; index < files.length; index++) { files[index].webkitRelativePath && zip.file(files[index].webkitRelativePath, files[index]) // 判斷是否包含shp文件 if (files[index].name.slice(-4) === '.shp') { flag = true } } const arrPath = files[0].webkitRelativePath.split('/') if ( (arrPath[0].slice(-4) === '.gdb' && this.dataForm.type === 'GDB') || (flag && this.dataForm.type === 'SHAPE') ) { // return promise對象 該方法是異步方法 zip.generateAsync({ type: 'Blob', compression: 'DEFLATE' }).then(content => { // 創建file對象 const fils = new File([content], arrPath[0], { type: 'zip' }) // console.log(fils) this.file.fileData = fils this.dataForm.name = fils.name this.dataForm.connection.Path = `${fils.name}.zip` }) } else { this.$message.error(`上傳文件格式應為${this.dataForm.type}類型!`) this.file.fileData = '' this.dataForm.name = '' this.dataForm.connection.Path = '' } }, ~~~ [示例3](https://www.cnblogs.com/dearxinli/p/8422140.html) [示例4](https://blog.csdn.net/qq2523208472/article/details/83578722)