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">开始上传</el-button>
</el-upload>
4、在handle-change回调中书写业务逻辑
var new_zip = new JsZip();
// console.log(new_zip.loadAsync(file.raw))
new_zip.loadAsync(file.raw).then(function(file) {
//----file压缩包里的内容----//
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包内容
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)
})