批量下载文件【vue】

这里的最大下载量 测试出来的是1000每次 
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleBatchDownload">111111</button>
  </div>
</template>
<script>
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      list: [
        {
          name: "史圣达",
          studentNum: "200603001",
          ropeokFic:
            "http://172.19.1.14:9090/moreStudentHead/210319108003504160768.jpg",
          hikvisonFic: "",
        },
        {
          name: "刘晨",
          studentNum: "201001001",
          ropeokFic:
            "http://172.19.1.14:9090/moreStudentHead/21033176733634052096.jpg",
          hikvisonFic: "",
        },
      ],
    };
  },
  methods: {
    handleBatchDownload() {
   // 这里需要注意的是responseType, 如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer
      const getFile = (url) => {
        console.log(url)
        return new Promise((resolve, reject) => {
          axios({
            method: "get",
            url,
            responseType: "arraybuffer",
          })
            .then((data) => {
              resolve(data.data);
            })
            .catch((error) => {
              reject(error.toString());
            });
        });
      };
      let piclist = [];
      let namelist = [];
      for (let i = 0; i < this.list.length; i++) {
        piclist.push(this.list[i].ropeokFic)
        namelist.push(`${this.list[i].name}_${this.list[i].studentNum}`);
      }
    
      const data = piclist; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      console.log(data)
      data.forEach((item, index) => {
        console.log(item)
        const promise = getFile(item).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象
         console.log(item)
          const file_name = `${namelist[index]}.jpg`;
          zip.file(file_name, data, { binary: true }); // 逐个添加文件
          cache[file_name] = data;
        });
        promises.push(promise);
        
      });
      console.log(promises)
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
          // 生成二进制流
          FileSaver.saveAs(content, "打包下载.zip"); // 利用file-saver保存文件
        });
      });
    },
  },
  mounted() {
    // console.log(list)
  },
};
</script>