vue图片下载zip包及上传zip包

首先下载 两个npm包文件
cnpm install file-saver --save
cnpm install jszip --save

StoreDowQrcode(arr, blogTitle = "图片信息") {
      var zip = new JSZip();
      var imgs = zip.folder(blogTitle);
      var baseList = [];
      var _this = this;
      for (var i = 0; i < arr.length; i++) {
        let name = arr[i].name; //图片名称
        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({ name: name, img: url.substring(22) });
          console.log(baseList, '--------------')
          if (baseList.length === arr.length) {
            if (baseList.length > 0) {
              _this.$message.success({
                title: "成功",
                message: "即将下载",
                type: "success",
              });
              for (let k = 0; k < baseList.length; k++) {
                imgs.file(baseList[k].name + ".png", baseList[k].img, {
                  base64: true,
                });
              }
              zip.generateAsync({ type: "blob" }).then(function (content) {
                // see FileSaver.js
                // 如需上传压缩包 可用content + 'zip包名'
                FileSaver.saveAs(content, '图层' + ".zip");
              });
            } else {
              _this.$message.error({
                title: "错误",
                message: "暂无图片可下载",
              });
            }
          }
        };
        console.log( arr[i].baseImg)
        image.src = arr[i].baseImg
      }