一.引入element的上传文件组件
<el-form-item label="文件"><el-uploadclass="upload-demo"dragaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"multiple:before-upload="beforeUpload"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div>点击上传图层文件</div></el-upload></el-form-item>
二.引入解压库
yarn add jszip
import * as JSZip from "jszip"
三.处理上传后的文件
const toZip = async (file) => {const zip = new JSZip()zip.file(file.name, file)const res = await zip.generateAsync({type: "blob",compression: "DEFLATE",compressionOptions: {level: 5}})console.log("res :>> ", res)}const beforeUpload = (file) => {toZip(file)}
四.简单的html例子（直接运行）
<html><head><title>客户端压缩文件测试</title><script src="/ajax/libs/jszip/3.6.0/jszip.min.js"></script><script src="/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script></head><body><span>选择文件:</span><input type="file" id="fileID" /><hr><button onclick="toZip()">压缩选择的文件并保存</button><body><script>async function toZip() {var file = document.getElementById("fileID");var zip = new JSZip();console.log('file :>> ', file.files);zip.file(file.files[0].name, file.files[0]);const res= await zip.generateAsync({type: "blob",compression: "DEFLATE", compressionOptions: {level: 5 }})console.log('res :>> ', res);}</script></html>
