前言

在前端的项目开发中，上传文件是非常常见的需求那么如果我们上传的是压缩包并要对压缩包的内容进行解压、读取并判断我们该怎么做呢？这里简单介绍一下利用jszip解压并对压缩包里的内容进行分析。

一、JSZip是什么？

JSZip就是一个javascript库用来操作.zip文件的工具可以用来压缩解压。

具体使用可参考官方文档：JSZip

二、使用步骤

1.引入库

// jszip的引入 有很多方式  可以使用npm install  下载   也可使用require 引入
// 这里使用原生的引入方式
<script src="../js/jszip/jszip.js"></script>
<script src="../js/jszip/jszip-utils.js"></script>

2.简单使用

代码如下（示例）：这里我上传的是一个zip压缩包且里面有图片利用jszip对压缩包解压并获取图片的大小分辨率等

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title>
</head><body id="body"><input type="file" accept=".zip" id="fileImport">  // 简单的一个上传文件   限制上传文件为zip压缩包<div id="demo"></div>// 引入jszip库<script src="../js/jquery-1.8.3.min.js"></script><script src="../js/jszip/jszip.js"></script><script></script>
</body></html>

在js中的使用：

$("#fileImport").on('change',function(event) {var files = event.target.files;for (var i = 0; i< files.length;i++) {handleFile(files[i]);}
});
function handleFile(fileObj) {//  进行解压   获取压缩包里的内容JSZip.loadAsync(fileObj).then(function(zip) {console.log(zip);// zip.files  既压缩包中  包含的有什么文件zip.forEach(function(relativePath,zipEntry) {  // zipEntry  就是压缩文件中的文件实例console.log(zipEntry);zipEntry.async("base64").then(function(res) {console.log(res);// res  就是将图片转换成base64imgLoad('data:image/png;base64,' + res,function(width,height) {console.log(width,height);  // 获取图片的宽 * 高})})})})
}function imgLoad (url, callback) {var img = new Image();img.src = url;if (img.complete) {callback(img.width, img.height);} else {img.onload = function () {callback(img.width, img.height);img.onload = null;};};};

总结

以上就是利用jszip来对zip压缩包进行解压并对压缩包中的图片进行一些数据获取的使用心得~~~大家如果项目也使用了该工具并对此有些疑问欢迎大家在评论中提出~我们可以一些探讨O(∩_∩)O

JSZip的简单使用相关推荐

vue前台导出zip文件_在Vue.js中使用JSZip实现在前端解压文件的方法_心病_前端开发者...
1.在 action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBefore" ...
react——利用jszip实现文件批量下载并打包成zip文件
本文章主要记录利用jszip实现文件批量下载图片,文档.mp3,视频(MP4)等文件,一般而言前端实现下载功能一般都是通过a链,这在下载单个文件的场景很实用,但如果是批量下载很多个文件,同样也可以用a ...
vue前端下载——jszip压缩和解压，结合file-saver导出图片zip，每20个图片分一个目录
使用jszip和file-saver导出图片,并打包为zip: import JSZip from "jszip"; import FileSaver from "fil ...
vue 使用 jszip file-saver 对附件word pdf png 等进行zip打包下载
vue jszip file-saver 实现一个勾选,批量前端下载文件,多个的话进行下载zip文件下载功能,如下图所示 1. 安装依赖 npm install jszip npm install f ...
JsZip+FileSaver实现打包文件并下载
这里使用jszip进行文件打包,可以创建文件夹,创建文件.然后使用FileSaver进行下载,这里使用FileSaver下载是因为这个工具可以下载大文件,而且效率非常高.一下代码示例,简单模块化了一下 ...
JSZip解压PDF文件并批量下载
JSzip解压PDF文件并批量下载因需要解压PDF文件并且实现批量下载,但网上找到的基本都是图片的解压和下载,所以参考图片的解压修改了一下. 用到了jszip,jszip-utils,file-sa ...
前端vue使用jszip压缩文件
一.引入element的上传文件组件 <el-form-item label="文件"><el-uploadclass="upload-demo&quo ...
在docker上安装部署tomcat项目超简单，拿来主义
在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...
Linux下tomcat的安装与卸载以及配置（超简单）
无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...
Docker安装Apache与运行简单的web服务——httpd helloworld
Docker运行简单的web服务--httpd helloworld目录[阅读时间:约5分钟] 一.Docker简介二.Docker的安装与配置[CentOS环境] 三.Docker运行简单的web ...

JSZip的简单使用

前言

一、JSZip是什么？

二、使用步骤

1.引入库

2.简单使用

总结

JSZip的简单使用相关推荐

最新文章

热门文章

JSZip的简单使用

​前言

一、JSZip是什么？

二、使用步骤

1.引入库

2.简单使用

总结

JSZip的简单使用相关推荐

最新文章

热门文章

前言