前端解压压缩包（zip）解压后上传解压的文件 · 工作篇 · 看云

[TOC] >[success] # 前端解压压缩包（zip）解压后上传解压的文件需求：**前端解压zip压缩包** 并且将解压后的 **.xlsx** 文件以及 **额外的参数** 一起用 **FormData** 的方式提交给后台。 >[success] ## 安装 JSZip 插件首先需要安装 **[JSZip]()** ，**JSZip** 可以进行 **压缩** 以及 **解压** 等操作，指令如下：~~~npm install jszip~~~ >[success] ## 前端代码前端使用的是 **vue**引用js文件加上时间戳，所以下面代码拿 **vue** 项目代码举例，下面的代码意思：点击 **读取压缩包按钮** 后取到 **压缩包的 File 对象** ，将 **File对象** 传入 **zip.loadAsync** 中进行 **在线解压，读取压缩包中的文件，如果不是目录，是 xlsx 文件** ，就开始 **读取压缩包的内容**，设定 **压缩包中文件内容返回格式** 为 **base64** ，再通过 **dataURLtoFile** 方法将返回的 **base64** 转换为 **File 对象**引用js文件加上时间戳，然后就可以用 **new FormData()** 的 **append** 方法把 **File 对象** 添加进去传给后端即可。**index.vue**~~~读取压缩包~~~**注意** ：正常的 **base64** 是 **data:image/png;base64,iVBORw0KGgxxxx** 这种的，这里返回的 **base64** 是没有前面的 **文件类型（data:image/png;base64 ）** 以及 **base64** ，需要自己手动拼接。