在vue.js中使用JSZip实现在前端解压文件的方法
作者:仲斐 发布时间:2024-04-22 22:15:34
标签:vue.js,JSZip,解压,文件
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、 最后效果如下:
先单击上传按钮:
然后弹出选择框,选择压缩包文件:
单击打开会弹出解析压缩包中testTXT.txt文件里的内容:
单击确定后会开始上传文件:
上传完成后如图所示:
此为element-ui的upload控件完成,只需要简单配置即可,详情地址
JSZip详情请点击
来源:https://blog.csdn.net/zhongfei1217/article/details/53267648
0
投稿
猜你喜欢
- 1. 直接采用命令行模式更新1.1 搜索框搜索cmd,然后以管理员模式打开1.2 执行命令python -m pip install --u
- 安装刚接触Pillow的朋友先来看一下Pillow的安装方法,在这里我们以Mac OS环境为例:(1)、使用 pip 安装 Python 库
- 最近在工作中遇到一个问题,就是有一个功能希望在各种服务器上实现,而服务器上的系统版本可能都不一样,有的是 CentOS 6.x,有的是 Ce
- 进程是由系统自己管理的。1:最基本的写法from multiprocessing import Pooldef f(x): re
- TO_NUMBER(char[,'format_model']) 字符转换到数字类型TO_DATE(char[,'f
- Python使用pandas导入xlsx格式的excel文件内容1. 基本导入在 Python中使用pandas导入.xlsx文件的方法是r
- 一、节点的定义dom节点树图中可见节点HTML文档中的每个成分都是一个节点:整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTM
- kNN(k-nearest neighbor)是一种基本的分类与回归的算法。这里我们先只讨论分类中的kNN算法。k邻近算法的输入为实例的特征
- 阅读上一篇:你是真正的用户体验设计者吗? Ⅵ很可怕,是吧!图中翻译:(从内到外)第一层:用户体验第二层:内容管理界面设计顾客关系管理交互设计
- 精妙的"SQL"语句:◆复制表(只复制结构,源表名:a 新表名:b)SQL: select * into b from
- 1. 引言元组是Python中一种重要的内置数据类型。与列表一样,我们经常使用元组将多个对象保存为相应的数据容器。然而,与列表不同的是元组的
- 使用PHP开发应用程序,尤其是网站程序,常常需要生成随机密码,如用户注册生成随机密码,用户重置密码也需要生成一个随机的密码。随机密码也就是一
- 在开发中有个需求是一个选择城市的列表,看了看做成 * 联动好像不是特别方便 还是做成一整页可以按导航选取的就可以了话不多说开始上码我用的是va
- 开发过程中的数据库结构结构,不可避免的会需要反复的修改。最麻烦的情况莫过于开发者数据库结构已经修改,而实际应用中数据库又有大量数据,如何在不
- 利用Python OpenCV中的 cv.Resize(源,目标,变换方法)就可以实现变换为想要的尺寸了源文件:就不用说了目标:你可以对图像
- 有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看
- 1、安装pip install djangorestframework2、创建项目及应用创建项目创建应用目录结构如图3、设置settings
- PyQt是Qt框架的Python语言实现,是最强大的GUI库之一。PyQt提供了一个设计良好的窗口控件集合,具有更方便的操作性。学过VB的同
- 现在有一个横向的IFRAME,需要通过点击iframe外的一个图片来横向滚动iframe内的一个html页,但又不想让看见iframe的滚动
- 前不久听到这样一个面试的故事:面试官:你准备在我们公司做些什么事情?(大致这个意思)面试人:我准备在公司做网站重构,把原来是table的页面