1、 在vue文件的html中引入element的上傳控件，代碼如下：
<div> <el-upload action="http://jsonplaceholder.typicode.com/posts/" :before-upload="handleBefore"> <el-button size="small" type="primary">點擊上傳</el-button> <div class="el-upload__tip" slot="tip">上傳一個zip試一下</div> </el-upload></div>
2、 在項目中引入JSZip工具以便于調用其接口實現文件的解壓，具體需要先在vue-cli生成的項目中運行如下指令安裝JSZip：
npm i jszip -S or npm install jszip
3、 安裝完成后在node_modules目錄下會看到jszip文件夾，此時在script中聲明require來引入jszip，或者通過import導入：
var JSZip = require("jszip");orimport JsZip from 'jszip'4、 在<script>中的methods中添加上傳壓縮包前的觸發事件handleBefore，如下：
handleBefore(file) { var new_zip = new JSZip(); new_zip.loadAsync(file) .then(function(file) { // you now have every files contained in the loaded zip new_zip.file("testTXT.txt").async("string") // 此處是壓縮包中的testTXT.txt文件，以string形式返回其內容，此時已經可以獲取zip中的所有文件了 .then(function (content) { // use content alert(content) }); }); }5、 最后效果如下：
先單擊上傳按鈕：
然后彈出選擇框，選擇壓縮包文件：
單擊打開會彈出解析壓縮包中testTXT.txt文件里的內容：
單擊確定后會開始上傳文件：
上傳完成后如圖所示：
此為element-ui的upload控件完成，只需要簡單配置即可，詳情地址
以上這篇在vue.js中使用JSZip實現在前端解壓文件的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
