一.引入element的上传文件组件

 <el-form-item label="文件"><el-uploadclass="upload-demo"dragaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"multiple:before-upload="beforeUpload"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div>点击上传图层文件</div></el-upload></el-form-item>

二.引入解压库

yarn add jszip

import * as JSZip from "jszip"

三.处理上传后的文件

const toZip = async (file) => {const zip = new JSZip()zip.file(file.name, file)
const res = await zip.generateAsync({type: "blob",compression: "DEFLATE",compressionOptions: {level: 5}})console.log("res :>> ", res)
}
const beforeUpload = (file) => {toZip(file)
}

四.简单的html例子（直接运行）

<html><head><title>客户端压缩文件测试</title><script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body><span>选择文件:</span><input type="file" id="fileID" /><hr><button onclick="toZip()">压缩选择的文件并保存</button><body><script>async function toZip() {var file = document.getElementById("fileID");var zip = new JSZip();console.log('file :>> ', file.files);zip.file(file.files[0].name, file.files[0]);const res= await  zip.generateAsync({type: "blob",compression: "DEFLATE", compressionOptions: {level: 5 }})console.log('res :>> ', res);}</script>
</html>

前端vue使用jszip压缩文件相关推荐

前端实现对ZIP 压缩文件解压，实现前端直接展示结果，比如图片,压缩包等 audio对象进行播放
其中后台代码,很简单: /// <summary>/// 获取压缩的zip文件/// </summary>/// <returns></returns> ...
前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了看过了很多方法,做个整理吧哈哈哈哈参考的文章链接: https://www.cnblogs.com/jiangweic ...
vue3中使用jszip压缩文件
1.安装依赖 npm install jszip npm install file-saver --save 2.使用 <template><el-card class=" ...
关于前端Vue项目的env文件
文章目录关于.env文件(2021.2.3 初次接触) Vue配置生产.开发.测试环境至到package.json 拓:关于linux的几个小命令关于.env文件(2021.2.3 初次接触) . ...
vue前端下载——jszip压缩和解压，结合file-saver导出图片zip，每20个图片分一个目录
使用jszip和file-saver导出图片,并打包为zip: import JSZip from "jszip"; import FileSaver from "fil ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
axios 上传文件_聚是一团火散作满天星，前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传...
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
vue解决打包后文件过大的问题-使用压缩插件打包后压缩文件-compression-webpack-plugin
前言: 在用vue开发项目的时候,经常会面临一个文件,就是打包以后文件太大,首页加载时间长的问题,一般我们会从压缩文件,cdn引入文件,加载整合雪碧图等等的方式来优化,这里来谈谈压缩文件,主要使用的插 ...
SpringBoot中将图片和Excel表格打包成压缩文件供前端下载
一.需求: 今天碰到了一个需求,就是将COS对象存储的图片和后端的数据库查询出来的用户的信息的excel表格一起打包成一个压缩包提供给前端下载. 二.分析: 作者的思路是这样的: 从COS的存储地址拿 ...

前端vue使用jszip压缩文件

一.引入element的上传文件组件

二.引入解压库

三.处理上传后的文件

四.简单的html例子（直接运行）

前端vue使用jszip压缩文件相关推荐

最新文章

热门文章

前端vue使用jszip压缩文件

一.引入element的上传文件组件

二.引入解压库

三.处理上传后的文件

四.简单的html例子（直接运行） ​

前端vue使用jszip压缩文件相关推荐

最新文章

热门文章

四.简单的html例子（直接运行）