Vue 批量打包下载图片

参考链接：js批量打包下载图片

依赖包：FileSaver.js【下载文件】，JSZip【打包】

安装依赖：
npm install file-saver --save
npm install jszip --save

为了保证代码的复用性，故将打包下载过程封装成一个js

zipDownImage.js

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

/**
 *
 * @class UnpackAndDownImage
 * @example
 * ```javascript
 *
 * new UnpackAndDownImage({
 *  imgSrcList: imgSrcList, // 图片资源集合
 *  onProgress(res) {
 *    
 *  },
 *  onSuccess(res) {
 * 
 *  },
 *  onError(err) {
 * 
 *  }
 * })
 *
 * ```
 */

class UnpackAndDownImage {

  constructor(option){
    const opt = {
      imgSrcList:[], // 图片资源集合
      imgBase64:[], // 图片base64集合
      imageSuffix: [], // 图片后缀
      imgName:[], // 下载后的图片名称集合
      scheduleMsg:'', // 下载进度
      errorMsg:"" , //异常信息
      onProgress: this.onProgress,
      onSuccess: this.onSuccess,
      onError: this.onError,
    }

    this.option = Object.assign({}, opt, option)

    this.start()
  }

  start(){
    let count = 0;
    
    this.option.imgSrcList.forEach(item=>{
      let suffix = item.substring(item.lastIndexOf("."));
      let imgFileName = item.substring(item.lastIndexOf("/"),item.lastIndexOf("."));
      this.option.imageSuffix.push(suffix);
      this.option.imgName.push(imgFileName)
      this.getBase64(item).then((base64)=>{
        this.option.imgBase64.push(base64.substring(22));
        count+=1
        this.option.scheduleMsg = count + '/' + this.option.imgSrcList.length

        this.option.onProgress&&this.option.onProgress(this.option.scheduleMsg)
      }).catch(err=>{
        console.log(err)
        this.option.onError&&this.option.onError(err)
      })
    })
    this.zipSaveFile()
  }

  //传入图片路径，返回base64
  getBase64(img) {
    return new Promise((resolve,reject)=>{
      const image = new Image();
      image.crossOrigin = 'Anonymous';
      image.src = img;
      if(img){
        image.onload =()=>{
          return resolve(this.getBase64Image(image)) //将base64传给done上传处理
        }
      }else{
        reject("转换base64失败")
      }
    })
  }

  getBase64Image(img, width, height) {
    //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
    let canvas = document.createElement("canvas");
    canvas.width = width ? width : img.width;
    canvas.height = height ? height : img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    let dataURL = canvas.toDataURL("image/jpeg", 0.9);
    return dataURL;
  }

  /** 打包并下载 */
  zipSaveFile(){
    let zip = new JSZip();
    // zip.file("readme.txt", "案件详情资料\n");
    let img = zip.folder("images");
    setTimeout(()=>{
      if(this.option.imgSrcList.length == this.option.imgBase64.length){
        this.option.imgSrcList.forEach((imgItem,i)=>{
          img.file(this.option.imgName[i] + this.option.imageSuffix[i], this.option.imgBase64[i], {base64: true})
        })
        zip.generateAsync({type:"blob"}).then((content)=> {

          let fileName = String(new Date().getTime()) +'.zip'
          // see FileSaver.js
          status = saveAs(content, fileName);
          
          this.option.onSuccess&&this.option.onSuccess()

          this.option.scheduleMsg = ""
        });
      }else{
        this.zipSaveFile();
      }
   },100);
  }

  onProgress(res) {
    console.log('onProgress',
      res);
  }

  onSuccess(res) {
    console.log('onSuccess:',
      res)
  }

  onError(res) {
    console.error('onError',
      res)
  }

}

export default UnpackAndDownImage;

vue 文件使用

import UnpackAndDownImage from '@/utils/zipDownImage'

// 下载
    download(scope){
      const _this = this
      // 图片链接
      _this.imgSrcList =["http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3rn521778998397.jpeg",
   "http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3re521777382739.jpeg",
   "http://sktcm.oss-cn-hangzhou.aliyuncs.com/files/12/3pu521710268997.jpeg"]

        _this.downloadState = true

        new UnpackAndDownImage({
          imgSrcList: _this.imgSrcList,
          onError(err) {
            console.log(err)
          },
          onProgress(res) {
            console.log('onProgress',res)
          },
          onSuccess(res) {
            console.log('onSuccess',res)
          }

    },