vue 批量下载照片，打包成zip

安装  jszip   file-saver

npm install --save jszip
npm install --save file-saver

 页面导入

	import JSZip from 'jszip'import FileSaver from "file-saver"

代码部分： 

// 图片批量下载到本地getImgArrayBuffer(url) {let _this = this;return new Promise((resolve, reject) => {//通过请求获取文件blob格式let xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", url, true);xmlhttp.responseType = "blob";xmlhttp.onload = function() {if (this.status == 200) {resolve(this.response);} else {reject(this.status);}};xmlhttp.send();});},
// 图片批量下载 downImg(id) {this.$confirm('网速太慢或图片太多时，请耐心等待~', '温馨提示', {confirmButtonText: '我知道了，开始下载',showCancelButton: false,type: 'success'}).then(() => {request({url: 'admin/index/albumPhotoUrls',method: 'post',data: {id}}).then(res => {if (res.data.state === '0') {console.log('相册列表', res)let _this = this;let zip = new JSZip();let cache = {};let promises = [];let images = res.data.data.urls_this.title = '正在加载压缩文件';for (let item of images) {const promise = _this.getImgArrayBuffer(item).then(data => {//解决之前ios 文件没有后缀名，电脑打不开的问题，默认加上png后缀，没有该问题的可去掉 这部分代码let file=item.split('/')[item.split('/').length-1]let fileType=file.split('.')let filenameif(fileType.length==1){filename =file+".png"//判断是ios没有后缀名的文件}else{filename=file}// --endzip.file(filename, data, {binary: true});cache[filename] = data;});promises.push(promise);}Promise.all(promises).then(() => {zip.generateAsync({type: "blob"}).then(content => {_this.title = '正在压缩';FileSaver.saveAs(content, '照片');_this.title = '压缩完成';});}).catch(res => {_this.$message.error('文件压缩失败');});}})})},		

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！