vue3中如何获取压缩包里文件的数量（解压zip）

1.安装插件

npm install jszip

2.引入使用

<el-upload style="width: 100%" ref="uploadRef" :file-list="filelist" drag class="upload-demo" action="#" 
:http-request="onChange" multiple :auto-upload="false"
:before-upload="handleBeforeUpload"
    :show-file-list="true">
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
        将文件拖到此处 或 <em>点击上传</em>
    </div>
    <template #tip>
        <div class="el-upload__tip">文件仅支持pdf、zip、png、jpg。单个文件大小不超过200M</div>
    </template>
</el-upload>

import JSZip from 'jszip';

<script setup>
import JSZip from 'jszip';

async function handleBeforeUpload(file) {
    try {
        const zip = await readAndUnzip(file);
        const fileNames = Object.keys(zip.files);
        console.log('压缩包中的文件数量：', fileNames.length);
        console.log('压缩包中的文件名：', fileNames);
        // 在这里可以根据需要对压缩包中的文件进行处理
        return Promise.resolve();
    } catch (error) {
        console.error('解压失败：', error);
        return Promise.reject();
    }
},
function readAndUnzip(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = async (event) => {
            try {
                const zip = await JSZip.loadAsync(event.target.result);
                resolve(zip);
            } catch (error) {
                reject(error);
            }
        };
    });
}
  }
};
</script>

3.说明

解压操作一般都是在上传文件前，也就是before-upload这个属性里进行解压操作；

JSZip解压不仅可以拿到压缩包里文件的数量，还可以获取一些其他信息