前端批量压缩下载

Posted 2021-02-16 jay-sans

　import axios from ‘axios‘

　import JSZip from ‘jszip‘　　//打包压缩必备，参考链接https://stuk.github.io/jszip/

　import FileSaver from ‘file-saver‘　　//文件保存至本地，参考链接https://github.com/eligrey/FileSaver.js/

// 批量下载
async handleBatchDownload(selectImgList){
   const self = this
   const data = selectImgList;
   const zip = new JSZip()
   const cache = {}
   const promises = []
   await data.forEach( (item,key) => {
   　　const promise = self.getFile(item).then(dta => { // 下载文件, 并存成ArrayBuffer对象
     　　// 获取文件名
     　　const file_name = self.nameOptions[key].value + ‘.jpg‘
     　　zip.file(file_name, dta, {binary: true}) // 逐个添加文件
     　　cache[file_name] = dta
   　　})
   　　promises.push(promise)
   })
   Promise.all(promises).then(() => {
      zip.generateAsync({type: "blob"}).then(content => { // 生成二进制流
        FileSaver.saveAs(content, this.nameOptions[0].value + ".zip") // 利用file-saver保存文件
        this.loading = false
      }).catch( err=>{
        this.loading = false
        this.$notify({
          message: "网络出了点小问题，请稍后再试！",
          type: "error"
        });
      })
   })
            
},
// 下载图片
getFile(url) {
  return new Promise((resolve, reject) => {
    axios({
       method: ‘get‘,
       url,
       responseType: ‘arraybuffer‘
    }).then(res => {
       // console.log(res)
       resolve(res)
    }).catch(error => {
       console.log(error)
       reject(error.toString())
    })
  })
},