在vue.js中使用JSZip实现在前端解压文件的方法


Posted in Javascript onSeptember 05, 2018

1、 在vue文件的html中引入element的上传控件,代码如下:

<div>
 <el-upload
 action="//jsonplaceholder.typicode.com/posts/"
 :before-upload="handleBefore">
 <el-button size="small" type="primary">点击上传</el-button>
 <div class="el-upload__tip" slot="tip">上传一个zip试一下</div>
 </el-upload>
</div>

2、 在项目中引入JSZip工具以便于调用其接口实现文件的解压,具体需要先在vue-cli生成的项目中运行如下指令安装JSZip:

npm i jszip -S or npm install jszip

3、 安装完成后在node_modules目录下会看到jszip文件夹,此时在script中声明require来引入jszip,或者通过import导入:

var JSZip = require("jszip");
or
import JsZip from 'jszip'

4、 在<script>中的methods中添加上传压缩包前的触发事件handleBefore,如下:

handleBefore(file) {
 var new_zip = new JSZip();
new_zip.loadAsync(file)
 .then(function(file) {
 // you now have every files contained in the loaded zip
 new_zip.file("testTXT.txt").async("string") // 此处是压缩包中的testTXT.txt文件,以string形式返回其内容,此时已经可以获取zip中的所有文件了
 .then(function (content) {
 // use content
 alert(content)
 });
 });
 }

5、 最后效果如下:

先单击上传按钮:

在vue.js中使用JSZip实现在前端解压文件的方法

然后弹出选择框,选择压缩包文件:

在vue.js中使用JSZip实现在前端解压文件的方法

单击打开会弹出解析压缩包中testTXT.txt文件里的内容:

在vue.js中使用JSZip实现在前端解压文件的方法

单击确定后会开始上传文件:

在vue.js中使用JSZip实现在前端解压文件的方法

上传完成后如图所示:

在vue.js中使用JSZip实现在前端解压文件的方法

此为element-ui的upload控件完成,只需要简单配置即可,详情地址

JSZip详情请点击

以上这篇在vue.js中使用JSZip实现在前端解压文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
在vscode中统一vue编码风格的方法
Feb 22 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 #Javascript
详解Angular6学习笔记之主从组件
Sep 05 #Javascript
webpack4 入门最简单的例子介绍
Sep 05 #Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 #Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 #Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 #Javascript
解决vue点击控制单个样式的问题
Sep 05 #Javascript
You might like
php post json参数的传递和接收处理方法
2018/05/31 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
从vue源码看props的用法
2019/01/09 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
2014新年元旦活动策划方案
2014/02/18 职场文书
企业宣传标语
2014/06/09 职场文书
节能减耗标语
2014/06/21 职场文书
电子商务专业求职信
2014/07/10 职场文书
学校四风对照检查材料
2014/08/28 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
logback 实现给变量指定默认值
2021/08/30 Java/Android