vue将文件/图片批量打包下载

各种格式都可以,只要url能够打开或者下载文件即可.

1.通过文件的url,使用js的XMLHttpRequest获取blob

2.将blob压缩为zip

由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒

添加依赖

//npm install jszip

//npm install file-saver

在页面的script中引入依赖

import JSZip from 'jszip'

import FileSaver from 'file-saver'

代码

   /**文件打包
    * arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
    * filename 压缩包名
    * */
   filesToRar(arrImages, filename) {
    let _this = this;
    let zip = new JSZip();
    let cache = {};
    let promises = [];
    _this.title = '正在加载压缩文件';
    for (let item of arrImages) {
     const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => {
      // 下载文件, 并存成ArrayBuffer对象(blob)
      zip.file(item.renameFileName, data, { binary: true }); // 逐个添加文件
      cache[item.renameFileName] = data;
     });
     promises.push(promise);
    }
    Promise.all(promises).then(() => {
     zip.generateAsync({ type: "blob" }).then(content => {
      _this.title = '正在压缩';
      // 生成二进制流
      FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名
      _this.title = '压缩完成';
     });
    }).catch(res=>{
     _this.$message.error('文件压缩失败');
    });
   },
  //获取文件blob
   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();
    });
   },

补充知识：vue 生成二维码并且批量打包下载代码

我就废话不多说了，大家还是直接看代码吧~

调用setarr传数组；