前端批量打包下载图片_个人总结 _@jie

前段时间pc端的一个需求，需要将图片打包下载到本地，于是就开始网上各种搜，折腾了几天，看了各种版本，最终自己整合后，终于实现功能。

由于需求是需要打包下载，安装打包文件的插件即可，项目是基于vue的，所以需要以下两个插件支持

1、安装插件 
	npm install jszip --save
	npm install flie-saver --save
            
2、在需要用的vue文件里引入
    import JSZip from 'jszip'
    import FileSaver from 'file-saver'      

废话不多说，上代码

<template>
 <el-button type="primary" @click="download">打包图片</el-button>
</template>


<script>
// 打包图片需要的插件
import JSZip from 'jszip'
import FileSaver from 'file-saver'

export default {
	data () {
    	return {
    		imgSrcList: []	// 图片合集
		}
	},
	methods:{
		// 下载
    	download () {
    		console.log(this.imgSrcList, '图片合集')
      		const arr = this.imgSrcList.map((item, index) => {
        		return {
          			fileUrl: item,
          			renamefileName: 'img' + (index * 1 + 1) + '.jpg'
        		}
      		})
      		this.unpack(arr, '图片打包.zip')
    	},
    	unpack (arr, fileName) {
      		const _this = this
      		const zip = new JSZip()
      		const cache = {}
      		const list = []
      		arr.forEach((item) => {
        		const promise = _this.getImgArrayBuffer(item.fileUrl).then(data => {
          			// 下载文件, 并存成ArrayBuffer对象(blob)
          			zip.file(item.renamefileName, data, { binary: true }) // 逐个添加文件
          			cache[item.renamefileName] = data
        		})
        		list.push(promise)
      		})
      		Promise.all(list).then(() => {
          		zip.generateAsync({ type: 'blob' }).then(content => {
            		// 生成二进制流
            		FileSaver.saveAs(content, fileName) // 利用file-saver保存文件  自定义文件名
            		_this.$message.success('压缩完成')
          		}).catch(res => {
            		_this.$message.error('文件压缩失败')
          		})
        	})
    	},
    	getImgArrayBuffer (url) {
      		return new Promise((resolve, reject) => {
        		const 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()
      		})
    	},
	}
}
</script>

功夫不负有心人呐！终于成功！
希望转载的话可以挂上链接🔗哈~ ，毕竟努力了几天的成果孩儿也不容易