Vue 批量打包下载图片

参考链接：js批量打包下载图片

依赖包：FileSaver.js【下载文件】，JSZip【打包】

安装依赖： npm install file-saver --save npm install jszip --save

为了保证代码的复用性，故将打包下载过程封装成一个js

zipDownImage.js

import JSZip from 'jszip' import FileSaver from "file-saver" /** * * @class UnpackAndDownImage * @example * ```javascript * * new UnpackAndDownImage({ * imgSrcList: imgSrcList, // 图片资源集合 * onProgress(res) { * * }, * onSuccess(res) { * * }, * onError(err) { * * } * }) * * ``` */ class UnpackAndDownImage { constructor(option){ const opt = { imgSrcList:[], // 图片资源集合 imgBase64:[], // 图片base64集合 imageSuffix: [], // 图片后缀 imgName:[], // 下载后的图片名称集合 scheduleMsg:'', // 下载进度 errorMsg:"" , //异常信息 onProgress: this.onProgress, onSuccess: this.onSuccess, onError: this.onError, } this.option = Object.assign({}, opt, option) this.start() } start(){ let count = 0; this.option.imgSrcList.forEach(item=>{ let suffix = item.substring(item.lastIndexOf(".")); let imgFileName = item.substring(item.lastIndexOf("/"),item.lastIndexOf(".")); this.option.imageSuffix.push(suffix); this.option.imgName.push(imgFileName) this.getBase64(item).then((base64)=>{ this.option.imgBase64.push(base64.substring(22)); count+=1 this.option.scheduleMsg = count + '/' + this.option.imgSrcList.length this.option.onProgress&&this.option.onProgress(this.option.scheduleMsg) }).catch(err=>{ console.log(err) this.option.onError&&this.option.onError(err) }) }) this.zipSaveFile() } //传入图片路径，返回base64 getBase64(img) { return new Promise((resolve,reject)=>{ const image = new Image(); image.crossOrigin = 'Anonymous'; image.src = img; if(img){ image.onload =()=>{ return resolve(this.getBase64Image(image)) //将base64传给done上传处理 } }else{ reject("转换base64失败") } }) } getBase64Image(img, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小 let canvas = document.createElement("canvas"); canvas.width = width ? width : img.width; canvas.height = height ? height : img.height; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); let dataURL = canvas.toDataURL("image/jpeg", 0.9); return dataURL; } /** 打包并下载 */ zipSaveFile(){ let zip = new JSZip(); // zip.file("readme.txt", "案件详情资料\n"); let img = zip.folder("images"); setTimeout(()=>{ if(this.option.imgSrcList.length == this.option.imgBase64.length){ this.option.imgSrcList.forEach((imgItem,i)=>{ img.file(this.option.imgName[i] + this.option.imageSuffix[i], this.option.imgBase64[i], {base64: true}) }) zip.generateAsync({type:"blob"}).then((content)=> { let fileName = String(new Date().getTime()) +'.zip' // see FileSaver.js status = saveAs(content, fileName); this.option.onSuccess&&this.option.onSuccess() this.option.scheduleMsg = "" }); }else{ this.zipSaveFile(); } },100); } onProgress(res) { console.log('onProgress', res); } onSuccess(res) { console.log('onSuccess:', res) } onError(res) { console.error('onError', res) } } export default UnpackAndDownImage;

vue 文件使用

import UnpackAndDownImage from '@/utils/zipDownImage' // 下载 download(scope){ const _this = this // 图片链接 _this.imgSrcList =["http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3rn521778998397.jpeg", "http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3re521777382739.jpeg", "http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3pu521710268997.jpeg"] _this.downloadState = true new UnpackAndDownImage({ imgSrcList: _this.imgSrcList, onError(err) { console.log(err) }, onProgress(res) { console.log('onProgress',res) }, onSuccess(res) { console.log('onSuccess',res) } },