vue中从后端得到img的uri下载打包

1.需要先安装axios，jszip，file-saver；

npm i jszip

npm i file-saver

2.引入axios，jszip，file-saver；

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

3.创建一个getFile

const getFile = url => {
 return new Promise((resolve, reject) => {
 axios({
  method:'get',
  url,
  responseType: 'arraybuffer'
 }).then(data => {
  resolve(data.data)
 }).catch(error => {
  reject(error.toString())
 })
 })
}

4，拿到一系列的地址，我这里因为是相机板子直接就拿到了img的uri放在了arr1里面，之后调用方法准备打包

getimguri() {
      var arr1 = [];
      this.tableData.forEach((i) => {
        let a = i.img_uri;
        arr1.push(a);
      });
      console.log(arr1);
      this.handleBatchDownload(arr1);
    },

5.开始打包

handleBatchDownload(arr1) {
      const data = arr1; 
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      data.forEach((item) => {
        const promise = getFile(item).then((data) => {
          const arr_name = item.split("/");
          const file_name = arr_name[arr_name.length - 1]; 
          zip.file(file_name, data, { binary: true });
          cache[file_name] = data;
        });
        promises.push(promise);
      });
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
          FileSaver.saveAs(content, "图片.zip");
        });
      });
    },