1伊履、下載jszip
npm i jszip -S
2、包引入jszip
import JsZip from 'jszip';
3款违、upload組件
<el-upload
ref="upload"
:data="formData"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:headers="tokens"
:on-change="addFile"
:auto-upload="false"
:before-upload="beforeUpload"
:on-error="uploadError"
:on-success="uploadSuccess"
:limit="limit"
:http-request="hanleUpload"
:on-exceed="onExceed"
action=""
style="margin-left: 20px"
class="upload-demo">
<div slot="tip" class="el-upload__tip">選擇上傳文件,目前僅支持zip格式上傳</div>
<el-button ref="trigger" slot="trigger" size="small" type="primary">添加文件</el-button>
<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">開(kāi)始上傳</el-button>
</el-upload>
4唐瀑、在handle-change回調(diào)中書(shū)寫(xiě)業(yè)務(wù)邏輯
var new_zip = new JsZip();
// console.log(new_zip.loadAsync(file.raw))
new_zip.loadAsync(file.raw).then(function(file) {
//----file壓縮包里的內(nèi)容----//
var _array = _obj.values(file.files);
})
5、如果要獲取中文名的文件插爹，需要解碼一下
this.fileList = fileList
// 文件大小
const fileSize = file.size / 1024 / 1024
console.log(file)
const _this = this
const zip = new JSZip()
// 獲取zip包內(nèi)容
var iconv = require('iconv-lite')
zip.loadAsync(file.raw, {
decodeFileName: function(bytes) {
return iconv.decode(bytes, 'cp936')
}
}).then(function(zip) {
console.log(zip)
// 獲取壓縮包里面的文件名(11/37152519950731531X_正.jpg)
const arr = Object.keys(zip.files)
})