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解压不仅可以拿到压缩包里文件的数量,还可以获取一些其他信息