安装插件

• 在项目中安装以下插件

 // 安装JSZIP
 npm install jszip --save

 // 安装file-saver
 npm install flie-saver --save

引入插件

• 在需要用的 Vue 文件里引入

 // 引入jszip
 import JSZip from 'jszip'

 // 引入file-saver里的saveAs包
 import { saveAs } from 'file-saver';

格式转化

• 通过图片的 URL ，转换成二进制 Blob 对象

 imgToBuffer(url) {
   return new Promise((resolve, reject) => {
     const xml = new XMLHttpRequest();
     xml.open('GET', url, true);
     xml.responseType = 'blob';
     xml.onload = function ({ currentTarget }) { //从事件对象结构出currentTarget
       const { status, response } = currentTarget;
       status === 200 ? resolve(response) : reject(status); // response就是转化后的
     };
     xml.send();
   });
 }

图片打包

 filePacking() {
   const zip = new JSZip();
   const imgCache = {};
   const imgArr = [];
   this.urlList.forEach((item) => { // urlList格式：[{url:图片链接,name:图片名称}...]
     // 逐个添加文件
     const promise = this.imgToBuffer(item.url).then((res) => { 
       zip.file(`${item.name}.${res.type.split('/').pop()}`, res, { binary: true }); 
       imgCache[item.name] = res; // 下载文件, 并存成ArrayBuffer对象(blob)
     });
     imgArr.push(promise);
   });
   Promise.all(imgArr).then(() => {
     zip.generateAsync({ type: 'blob' }).then((content) => {
          saveAs(content, '压缩包名称'); // 打包压缩
          this.$message.success('压缩完成');
     }).catch((err) => {
         this.$message.error(err.message);
     });
   });
 }

注意： 以上方法不仅可以批量下载图片，视频也适合!!!