[TOC] >[success] # 前端解压压缩包（zip）解压后上传解压的文件 需求：**前端解压zip压缩包** 并且将解压后的 **.xlsx** 文件以及 **额外的参数** 一起用 **FormData** 的方式提交给后台。 >[success] ## 安装 JSZip 插件 首先需要安装 **[JSZip](https://stuk.github.io/jszip/)** ，**JSZip** 可以进行 **压缩** 以及 **解压** 等操作，指令如下： ~~~ npm install jszip ~~~ >[success] ## 前端代码 前端使用的是 **vue** ，所以下面代码拿 **vue** 项目代码举例，下面的代码意思：点击 **读取压缩包按钮** 后取到 **压缩包的 File 对象** ，将 **File对象** 传入 **zip.loadAsync** 中进行 **在线解压，读取压缩包中的文件，如果不是目录，是 xlsx 文件** ，就开始 **读取压缩包的内容**，设定 **压缩包中文件内容返回格式** 为 **base64** ，再通过 **dataURLtoFile** 方法将返回的 **base64** 转换为 **File 对象**，然后就可以用 **new FormData()** 的 **append** 方法把 **File 对象** 添加进去传给后端即可。 **index.vue** ~~~ <template> <el-upload action="" :multiple="false" accept=".zip" :limit="1" :before-upload="beforeAvatarUpload" :http-request="componentImport" :show-file-list="false" :file-list="fileList" style="display:inline-block;margin:0 10px"> <el-button size="small" type="success" icon="el-icon-upload">读取压缩包</el-button> </el-upload> </template> <script> // 引入解压压缩包插件 const JSZip = require("jszip") export default { data(){ return { fileList: [] // 储存文件列表 } }, methods:{ // 验证文件格式是否正确 beforeAvatarUpload(file) { let isFile = file.name.split('.')[file.name.split('.').length - 1] == 'zip' if (!isFile) { this.$message.error('导入文件格式不正确') } return isFile }, // 读取压缩文件 async componentImport(file){ // 引用js const zip = new JSZip() // 解压Zip压缩包，参数默认是二进制 const zipData = await zip.loadAsync(file.file) for (let key in zipData.files) { if (!zipData.files[key].dir) { // 判断是否是目录 if (/\.(xlsx)$/.test(zipData.files[key].name)) { // 判断是否是xlsx文件 let base = await zip.file(zipData.files[key].name).async('base64') // 以base64输出文本内容 // Base64 转 File 对象 const result = this.dataURLtoFile(base, zipData.files[key].name) console.log(result,'最终解压后的File对象') } } } // 清空文件列表 this.fileList = [] }, /** * @description 将 base64 转换为 File 对象 * @param {String} dataURL base64 的编码 * @param {String} fileName 文件名称 * @param {String} fileType 文件类型，默认为 excel 类型 * @returns {File} File 对象 */ dataURLtoFile(dataURL, fileName, fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') { /** * 注意：【不同文件不同类型】，例如【图片类型】就是`data:image/png;base64,${dataURL}`.split(',') * 下面的是【excel文件(.xlsx尾缀)】的文件类型拼接，一个完整的 base64 应该 * 是这样的,例如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAABGdBTUEAALGPC/xhBQAAACBjSFJN */ const arr = `data:${fileType};base64,${dataURL}`.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } let blob = new File([u8arr], fileName, { type: mime }) return blob } } } </script> ~~~ **注意** ：正常的 **base64** 是 **data:image/png;base64,iVBORw0KGgxxxx** 这种的，这里返回的 **base64** 是没有前面的 **文件类型（data:image/png;base64 ）** 以及 **base64** ，需要自己手动拼接。