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

1.元素的上传控制被引入到vue文件的html中。代码如下：

div El-upload action='//jsonplaceholder .打字码.com/post/' : before-upload=' handle before ' El-button size=' small ' type=' primary '单击上传/El-button div class=' El-upload _ _ tip ' slot=' tip '尝试上传一个zip /div /el-upload/div2。在项目中引入JSZip工具调用其接口实现文件解压。具体来说，在vue-cli生成的项目中运行以下指令来安装JSZip:

Npm i jszip -S或Npm安装jszip3。安装完成后，您将在node_modules目录中看到jszip文件夹。此时，在脚本中声明require以导入jszip，或者通过import导入它：

var JSZIp=require(' JSZIp ')；or从“JsZip”4导入JsZip。在将压缩包上载到脚本中的方法之前，添加触发器事件句柄，如下所示：

handleBefore(file){ var new _ zip=new JSZip()；new_zip.loadAsync(文件)。然后(函数(文件){ //您现在拥有了加载的zip new_zip.file('testTXT.txt ')中包含的所有文件。async('string') //这里是压缩包中的testTXT.txt文件，它的内容以字符串的形式返回。此时，可以获得zip中的所有文件。然后(函数(内容){//使用内容提醒(内容)})；});}5.最终效果如下：

首先单击上传按钮：

然后弹出选择框，选择压缩包文件：

点击打开，弹出分析压缩包中testTXT.txt文件的内容：

单击确定开始上传文件：

上传完成后，如图所示：

这是element-ui的上传控件，只需要简单的配置。详情请参考地址

详情请点击JSZip

以上使用vue.js中的JSZip在前端解压文件的方法，都是边肖分享给大家的内容，希望能给大家一个参考和支持。