在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入门教程(12) js对象化编程
Jan 31 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
js生成随机数方法和实例
Jan 17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
JS精确判断数据类型代码实例
Dec 18 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实现文件安全下载
2006/10/09 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python装饰器基础详解
2016/03/09 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python生成requirements.txt的两种方法
2019/09/18 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
西部世纪面试题
2014/12/05 面试题
物业保安岗位职责
2014/07/02 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python