HTML原生不支持ZIP解压，需用JSZip等库解析Blob/ArrayBuffer；JSZip.loadAsync()须传ArrayBuffer（非File），中文文件名需手动转码，大文件应限大小或改服务端解压。
HTML中用选ZIP文件，但拿不到内部数据
浏览器原生不支持解压 ZIP，<input type="file"> 只能读取 ZIP 文件的二进制内容（Blob 或 ArrayBuffer），无法直接访问其中的 index.html、data.json 等文件。你看到的“上传ZIP”动作，其实只是把整个压缩包当做一个普通文件载入内存。
用JSZip在前端解压ZIP并读取文件内容
必须借助第三方库，JSZip 是目前最稳定、兼容性最好的选择。它能在浏览器里解析 ZIP 的目录结构，并提取指定文件的文本或二进制数据。
实操建议：
- 通过 CDN 引入：
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>（注意 v3.x 兼容 IE11，v4+ 需要现代浏览器） -
input元素监听change事件，拿到files[0] - 用
JSZip.loadAsync(file)解析 ZIP，返回 Promise - 遍历
zip.files对象，用async()方法读取具体文件内容，例如：await zip.file("config.json").async("text") - 注意：图片、PDF 等二进制文件需用
"arraybuffer"或"base64"模式读取，不能用"text"
常见错误：解压后读取中文文件名乱码或找不到文件
ZIP 文件若由 Windows 工具（如 WinRAR、自带压缩）生成，默认使用 GBK 或 CP936 编码存文件名，而 JSZip v3 默认按 UTF-8 解析——导致 zip.file("测试.txt") 返回 null。
立即学习“前端免费学习笔记（深入）”；
解决方法（仅限 JSZip v3）：
- 加载时显式指定编码：
JSZip.loadAsync(file, { decodeFileName: function (s) { return decodeURIComponent(escape(s)); } })不可靠，更稳妥的是用jszip-utils+iconv-lite手动转码（需额外引入） - 推荐源头规避：用 macOS 或
zip命令行（zip -r archive.zip folder/ -U中的-U表示 UTF-8 文件名）生成 ZIP - 调试技巧：打印
Object.keys(zip.files)查看实际识别出的文件名，确认是否含乱码
大 ZIP 文件卡顿或内存溢出怎么办
JSZip 全量加载 ZIP 到内存再解压，50MB 以上的 ZIP 很容易触发浏览器内存警告，甚至崩溃。
可选对策：
- 限制上传大小：
<input type="file" accept=".zip" max="20971520">（配合前端校验file.size < 20 * 1024 * 1024） - 只读关键文件：不要
await zip.forEach(...)遍历全部，而是精准定位zip.file("manifest.json")这类必要入口文件 - 服务端解压更稳妥：前端只上传 ZIP，后端（如 Node.js 的
node-stream-zip）解压并返回所需数据，避免浏览器负担
真正需要前端解压 ZIP 的场景其实不多，多数情况是想让用户“拖一个项目包进来预览”，这时候得接受它的限制：小文件可行，大文件、含中文路径、加密 ZIP 都会立刻暴露短板。
