参考文档：https://blog.csdn.net/weixin_42448623/article/details/107845783
参考文档里说明了如何读取服务端zip包里的文件信息，未说明如何读取本地上传zip包里面的文件信息，故补充说明如下。
从文件选择标签中读取上传zip包中指定路径下文件的示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="fileInput">
<script>
// 获取元素
var fileInput = document.querySelector("#fileInput");
// 监听事件
fileInput.onchange = function() {
// 获取文件
var file = this.files[0];
// 读取文件
var fileReader = new FileReader();
// 转换文件为ArrayBuffer
fileReader.readAsArrayBuffer(file);
// 监听完成事件
fileReader.onload = function() {
// 下面读取fileReader.result（arraybuffer）
console.log(fileReader.result.byteLength);
var zip = new JSZip(fileReader.result);
function Uint8ArrayToString(fileData) {
var dataString = "";
for (var i = 0; i < fileData.length; i++) {
// fromCharCode 将Unicode 编码转为一个字符: // Uint8Array 编码转 Unicode
dataString += String.fromCharCode(fileData[i]);
}
return dataString
}
// 返回 Unicode 编码，在zip.files中可以通过完整的文件路径获取制定的文件，但如果是错误路径或者指向一个目录，则无法获取任何信息
var Uint8ArrayStr = zip.files['package/test.txt']._data.getContent();
// Unicode 文件内容 Unicode中文乱码
var str = Uint8ArrayToString(Uint8ArrayStr);
console.log(str)
// Utf8 中文正常
var str2 = Utf8ArrayToStr(Uint8ArrayStr)
console.log(str2)
// Uint8Array 编码转 utf-8
function Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while (i < len) {
c = array[i++];
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
}
}
</script>
</body>
<script src="https://cdn.bootcss.com/jszip/2.1.0/jszip.min.js"></script>
<script src="https://cdn.bootcss.com/jszip-utils/0.0.2/jszip-utils.min.js"></script>
</html>
下面再给出一个从elementUI的Upload标签读取上传zip包中指定路径下文件的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
multiple
:limit="3">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</body>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/jszip/2.1.0/jszip.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { }
},
methods: {
beforeUpload(file) {
// 读取文件，注意这里传入的file参数和文件选择标签中的变量file是等价的
var fileReader = new FileReader();
// 转换文件为ArrayBuffer
fileReader.readAsArrayBuffer(file);
// 监听完成事件
fileReader.onload = function() {
// 下面读取fileReader.result（arraybuffer）
var zip = new JSZip(fileReader.result);
function Uint8ArrayToString(fileData) {
var dataString = "";
for (var i = 0; i < fileData.length; i++) {
// fromCharCode 将Unicode 编码转为一个字符: // Uint8Array 编码转 Unicode
dataString += String.fromCharCode(fileData[i]);
}
return dataString;
}
// 返回 Unicode 编码，在zip.files中可以通过完整的文件路径获取制定的文件，但如果是错误路径或者指向一个目录，则无法获取任何信息
var Uint8ArrayStr = zip.files['package/test.txt']._data.getContent();
// Unicode 文件内容 Unicode中文乱码
var str = Uint8ArrayToString(Uint8ArrayStr);
console.log(str);
// Utf8 中文正常
var str2 = Utf8ArrayToStr(Uint8ArrayStr);
console.log(str2);
// Uint8Array 编码转 utf-8
function Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while (i < len) {
c = array[i++];
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
out += String.fromCharCode(c);
break;
case 12:
case 13:
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
}
}
}
})
</script>
</html>
上例执行效果如下，在控制台可以看到从压缩文件中读取到package目录下test.txt文件中的字符串“测试”，同时也可以看到Uint8ArrayToString方法打印出的是乱码，这是由于Uint8ArrayToString方法仅能处理非中文字符：
注意：上面两个例子都没有针对读取路径/文件错误的情况进行处理，如果读取不到对应文件，则会有如下错误提示：
