前端解析zip压缩包 --- vue、react等等通用

第一步：下载安装jszip插件

yarn add jszip

第二步： 导入插件

import JSZip from 'jszip'

第三步： new一个JSZip对象

const zip = new JSZip()

第四步： 获取内部每个文件的file

zip.loadAsync(file).then((res) => {
	consol.log(res.files) // 每个file
}) 

拓展： 判断压缩包内部文件是否都是img或jpg或png或jpeg图片

zip.loadAsync(file).then((res) => {
	 let isImg = true
	 Object.keys(res.files).forEach((key) => {
	   const typeFlag =
	     res.files[key].name.endsWith('jpg') ||
	     res.files[key].name.endsWith('png') ||
	     res.files[key].name.endsWith('bmp') ||
	     res.files[key].name.endsWith('jpeg')
	   if (!typeFlag) {
	     isImg = false
	   }
	 })
	 if (!isImg) {
      message.error(’压缩包内包含非要求格式文件！‘)
     }