前端Vue压缩图片视频ZIP

项目要求数据的图片、表格、视频进行zip压缩打包，刚开始的时候是后端返回链接直接下载，有点消耗服务器带宽。
然后就想着后端直接返回数据的链接，前端浏览器进行处理。

因为后端返回来的是图片或者视频的链接我们的进行处理转换文件流或者base64

首先利用 jszip 这个插件

//下载插件
npm --save install jszip file-saver
npm install  lrz  //图片链接转换base64的

创建download.js 文件

//引入插件
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import lrz from 'lrz'export const downloadZip = (data, NickName) => {const zip = new JSZip()const img = zip.folder('images') //创建一个images文件夹//lrz转换base64lrz(‘图片的链接’).then(function(rst) {//因为JSZip插件传入base64中不能带 'data:image/jpeg;base64' 所有要删掉img.file('图片.png',rst.base64.replace(/^data:(image)\/(png|jpeg);base64,/,''),{ base64: true })}zip.file( 'exe.xlsx','表格的base64', { base64: true })//压缩表格xhrequest(‘需要转换视频的URL’).then((res) => {zip.file( '视频.mp4', res, { Blob: true,})})//这里就压缩了  type可以是blob或者base64zip.generateAsync({ type: 'blob' }).then(function(content) {// see FileSaver.jssaveAs(content, 压缩包的名字 + '.zip')})//视频转换blob需要异步async function xhrequest(url) {let data = await fetch(url, { mode: 'cors' }).then((response) => response.blob()).then((res) => {return res})return data}
}

注意事项：jsZip这个插件添加的时候名字不能重复有可能会被覆盖，所以名字添加的时候最好有个key
jszip链接：https://www.npmjs.com/package/jszip
lrz 链接： https://www.npmjs.com/package/lrz

前端Vue压缩图片视频ZIP相关推荐

前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...
JavaScript前端实现压缩图片功能
通过原生的input标签拿到要上传的图片文件将图片文件转化成img元素标签在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件最后将该blob文件 ...
【前端】压缩图片以及图片相关概念
压缩图片思路获得上传文件上传文件类型为file 或者blod(这两个都是) 将file转成base64 base64压缩图片 base64转成file,判断大小,返回压缩后的图片大小流程: 1. ...
前端js压缩图片：compressionjs的使用
compressionjs <!DOCTYPE html> <html lang="zh"><head><title>前端图片压缩 ...
Nodejs前端服务器压缩图片
Nodejs作为前端服务器,自然能承担处理图片的能力, 使用GM for nodejs 作为图片处理器,调用ImageMagick处理图片使用ImageMagick var imageMagick ...
Vue压缩图片插件——localResizeIMG(简称lrz)
使用前须知: GitHub:localResizeIMG地址这个项目已不再维护了,可能很长一段时间都不会更新了. 插件演示地址引用: npm i lrz -S // 注意:使用npm下载,不要使用 ...
vue：前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~ compressImage.js文件 // 压缩图片 export function compressImage({ file, con ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
移动端图片上传并生成图片（图片上传/图片压缩/图片绘制/Vue纯前端）
如今用户上传图片,生成图保存分享这些都是h5页面的基操了吧,十分常见,实际操作起来也是满满的技能点,其实也有很多兼容问题的坑. 下面是以vue+elementUI做的一套,有需要的直接拿去- 如果有对 ...

前端Vue压缩图片视频ZIP

前端Vue压缩图片视频ZIP相关推荐

最新文章

热门文章