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 filename
									if(fileType.length==1){
										 filename =file+".png"//判断是ios没有后缀名的文件
									}else{
										filename=file
									}
									// --end
									zip.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('文件压缩失败');
							});


						}
					})

				})
			},