[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** ，需要自己手動拼接。