编辑代码

const axios = require('axios') // 用于请求图片
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
/**
 * 获取网络图片content
 * @param {Srting}url
 * @return {Promise<unknown>}
 */
function getPicture(url) {
  return new Promise((resolve, reject) => {
    axios({
      headers: {
        'Cache-control': 'no-cache'
      },
      url,
      method: 'GET',
      responseType: 'arraybuffer'
    }).then(data => {
      resolve(data.data)
    }).catch(error => {
      reject(error)
    })
  })
}

/**
 * 批量打包下载
 * 传入图片URL列表
 * @param {Array: [String]} images
 */
export function download(images) {
  // 这里用的element-ui组件，提示用户输入压缩包文件名
  MessageBox.prompt('请输入文件夹名', '另存为', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '请输入文件夹名'
  }).then(({ value }) => {
    const zip = new JSZip()
    const folder = zip.folder(value)
    const promises = images.map(image => {
      return getPicture(image).then(data => {
        // 获取图片名
        const name = image.split('/')[image.split('/').length - 1]
        folder.file(name, data, { binary: true })
      })
    })
    Promise.all(promises).then(() => {
      zip.generateAsync({ type: 'blob' }).then(content => {
        saveAs(content, value)
      })
    })
  }).catch(() => {})
}