安装依赖
npm i jszip
前提准备
准备好一个压缩包，格式为zip，存放两张png图片。
代码实现
<template><h1>JSZip,预览压缩包中的文件</h1><img v-for="(n,m) in picArr.arr":src="n":style="{width:'200px'}":key="m"><div>需要压缩的包(zip)</div><input type="file"@change="fn"></template><script setup>import { reactive } from '@vue/reactivity'import JSZip from 'jszip'let picArr = reactive({ arr: [] })const fn = (e) => {// console.log(e.target.files[0]);let zip = new JSZip()// loadAsync() 读取现有的zip，并在当前文件夹级别合并当前JSZip对象中的数据// 如果两个具有相同的名称，则加载的一个将替换另一个zip.loadAsync(e.target.files[0]).then(zipdata => {// console.log(zipdata.files);for (let n in zipdata.files) {// console.log(zipdata.files[n]);// .file(name) 读取文件在当前目录zipdata// 获得指定文件里面的文件名字.file(zip.files[n].name)// 指定返回结果类型.async('base64').then(res => {// 打印base64// console.log(res);let imgBase64 = 'data:image/jpeg;base64,' + respicArr.arr.push(imgBase64)})}})}</script><style scoped>div {margin: 0 auto;}</style>
结果显示
代开浏览器页面点击按钮上传压缩包。
结果会在浏览器页面中显示压缩包里的图片内容。
举一反三，如果压缩包里面的内容是文本信息呢，应该怎么显示？
关键部分：async('text') 实现对文本内容的解析。
准备一个文本压缩包如下。
代码修改如下
<template><h1>JSZip,预览压缩包中的文件</h1><img v-for="(n,m) in picArr.arr":src="n":style="{width:'200px'}":key="m"><div>需要压缩的包(zip)</div><input type="file"@change="fn"><h2>{{ zipContent }}</h2></template><script setup>import { reactive, ref } from '@vue/reactivity'import JSZip from 'jszip'let picArr = reactive({ arr: [] })let zipContent = ref('')const fn = (e) => {// console.log(e.target.files[0]);let zip = new JSZip()// loadAsync() 读取现有的zip，并在当前文件夹级别合并当前JSZip对象中的数据// 如果两个具有相同的名称，则加载的一个将替换另一个zip.loadAsync(e.target.files[0]).then(zipdata => {// console.log(zipdata.files);for (let n in zipdata.files) {// console.log(zipdata.files[n]);// .file(name) 读取文件在当前目录zipdata// 获得指定文件里面的文件名字.file(zip.files[n].name)// 指定返回结果类型.async('text').then(res => {// 打印文本信息console.log(res);zipContent.value = res})}})}</script><style scoped>div {margin: 0 auto;}</style>
结果显示
总结
通过上面的案例代码，可以举一反三进行预览显示视频和音频等其他类型文件，可以仔细了解JSZip官网中的api。
相关jszip的api 方法 可以查询https://stuk.github.io/jszip。
