vue 批量下载图片

     tapDownImg(e) {
        var imageList = []
        if (e.firstImage && e.firstImage.length > 10) {
          imageList.push(e.firstImage)
        }
        if (typeof e.imagesList == 'object') {
          if (e.imagesList.indexOf(e.firstImage) == -1) {
            imageList = imageList.concat(e.imagesList)
          } else {
            imageList = e.imagesList
          }
        }
        this.downImg(imageList)
      },
      downImg(imageList, imgNameList = null) {
        // yarn add jszip 或者 npm install jszip
        // yarn add file-saver 或者npm install file-saver
        // 安装上面俩插件后使用
        var blogTitle = '打包图片';
        var zip = new JSZip();
        var imgs = zip.folder(blogTitle);
        var baseList = [];
        // 要下载图片的url
        // var arr = ['./img1.png', './img2.png', './img3.png'];
        var arr = imageList
        // 下载后图片的文件名，个数应与arr对应
        // var imgNameList = ['图片1', '图片2', '图片3'];
        if (!imgNameList) {
          var imgNameList = []
          imageList.filter(url => {
            // var url=;
            // var k = urlArr[0],
            var appU = url.split('/');
            // console.log(url);
            imgNameList.push(appU[appU.length - 1])
            // console.log(appU);
          })
        }
        for (var i = 0; i < arr.length; i++) {
          let image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute('crossOrigin', 'anonymous');

          image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;

            let context = canvas.getContext('2d');
            context.drawImage(image, 0, 0, image.width, image.height);

            let url = canvas.toDataURL(); // 得到图片的base64编码数据
            canvas.toDataURL('image/png');

            baseList.push(url.substring(22)); // 去掉base64编码前的 data:image/png;base64,
            if (baseList.length === arr.length && baseList.length > 0) {
              for (let k = 0; k < baseList.length; k++) {
                imgs.file(imgNameList[k] + '.png', baseList[k], {
                  base64: true
                })
              }
              zip.generateAsync({
                type: 'blob'
              }).then(function(content) {
                // see FileSaver.js
                FileSaver.saveAs(content, blogTitle + '.zip');
              });
            }

          };
          image.src = arr[i];
        }
      },
      imgUrlsToArr(imgs) {
        // console.log(imgs)
        if (imgs == null) {
          return ""
        }
        var m = imgs.split(",");
        var r = []
        for (let img in m) {
          if (m[img]) {
            r.push(m[img])
          }
        }
        // console.log(r)
        return r;
      },
      instructionBook(value) {
        if (!value) return ''
        // value = value.toString()
        // return value.charAt(0).toUpperCase() + value.slice(1)
        var reg = new RegExp('【', "g")
        var newstr = value.replace(reg, "\n【")
        reg = new RegExp(';', "g")
        newstr = newstr.replace(reg, ";\n")
        reg = new RegExp('；', "g")
        newstr = newstr.replace(reg, "；\n")
        reg = new RegExp('。', "g")
        newstr = newstr.replace(reg, "。\n")
        return newstr
      },