基于JSZip的前端文件压缩1.介绍：这段时间，项目需要做一个这样的功能：当客户端上传一个文件（具体文件类型）时，它需要压缩文件然后上传以节省带宽和服务器端资源。为了完成这个功能，我们选择了GitHub上的JSZip。它是一个客户端插件，可以提供客户端压缩。作者给了一个API，但是在实际使用过程中还是遇到了很多问题，下面是实际过程中遇到的各种问题，直到最后完成整个文件的压缩并上传到后台。2.项目相关组件及环境：前端node.js+webpack前后端分离，后端java3。具体实现主要js代码：varJSZip=require('jszip');constcomponents=require('components');$('#confirmBtn').on('click',asyncfunction(){//绑定上传确认按钮，获取obj等模型文件，并进行压缩从页面上，当然html是多文件上传varfileList=fileBox[0].files;varobjName='example';//这里定义一个压缩文件的名字，供后台使用，当然也可以动态获取//varflag=false;for(constfileObjectoffileList){zip=awaitzipFileAsync(zip,fileObject);//这里是设置异步上传，await关键字使得对象返回到zip变量后后续zipFileAsync方法的执行}sendFileAsync(zip,objName);console.log(zip);returnfalse;//设置returnfalse以防止表单提交});这部分代码是异步压缩的核心，后面的异步压缩算法是如何调用的。以上需要关键字Async和await。一开始也尝试过使用同步压缩，但是会出现压缩没有完全完成，已经开始提交文件的现象，感谢lrh3321的指导，才完全实现了这个功能。因为异步压缩时我们上传的文件数量是可变的，所以需要使用await关键字来修改压缩过程。下面压缩过程的实现最终返回一个promise对象，当压缩过程完成后，完整的生成文件就存放在其中。/***异步压缩文件*@paramzip文件*/functionzipFileAsync(zip,file){constpromise=newPromise((resolve)=>{constreader=newFileReader();reader.readAsDataURL(file);reader.onloadend=function(e){varresult=reader.result;//读取后转换格式result=convertBase64UrlToBlob(result);console.log(zip);console.log(file.name);console.log(file.size);//resolve方法保证在异步压缩完成之前不会返回promiseresolve(zip.file(file.name,result,{type:'blob',}));};});returnpromise;}here对于演示，请查看JSZip/***异步发送文件*@paramzip文件*/functionsendFileAsync(zip,objName){zip.generateAsync({type:'blob',compression:'DEFLATE',//对该文件强制压缩compressionOptions:{//使用压缩级别，1-9，级别1的压缩率最低，级别9的压缩率最高level:6,},}).then(function(content){varformData=newFormData();formData.append('Blobfile',content);//获取上面的压缩内容，放入formdataformData.append('objName',objName);//将objName一起放入formdataprogressBar('Model/UploadModel',formData,content.size);});returnfalse;}/***将base64图片url数据转换为Blob*@paramurlData*url表示的base64图片数据*/http读取图片时，会进行base64编码后发送给服务器。如果不重新编码，则无法在图像查看器中查看ImagefunctionconvertBase64UrlToBlob(urlData){varbytes=window.atob(urlData.split(',')[1]);//处理异常，将小于0的ascii码转换为大于0的varab=newArrayBuffer(bytes.length);varia=newUint8Array(ab);for(vari=0;i
