vue批量下载图片

需求

管理后台需要批量导出选中的图片

实现难点

选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里

思路分析

1.先将选中二维码的地址存在一个数组中
2.依次请求图片并将其下载
3.后用jszip压缩文件
4.最后用file-saver生成文件

实现代码

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

methods: {
	// 赛选出选中的图片
	downloadImgAll () {
      let arr = [] //将图片地址存入该数组
      this.InforList.forEach(element => { // 获取到的所有图片
        this.listArr.forEach(item => { // 选中图片的id
          if (element.id == item) {
          //RealmName 这个是动态获取的域名
          //imgPath 图片地址
            arr.push(this.RealmName + element.imgPath)
          }
        })
      })
      this.async(arr)
    },
	// 批量下载
    async (selectImgList) {
      const data = selectImgList;
      const zip = new JSZip()
      const cache = {}
      const promises = []
      data.forEach(item => {
        const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
          const arr_name = item.split("/");
          let file_name = arr_name[arr_name.length - 1] // 获取文件名
          // if (file_name.indexOf('.png') == -1) {
          //    file_name = file_name + '.png'
          // }
          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, "photo.zip") // 利用file-saver保存文件
        })
      })
    },
    // 下载文件
    getFile (url) {
      return new Promise((resolve, reject) => {
        axios({
          method: 'get',
          url,
          responseType: 'arraybuffer'
        }).then(data => {
          resolve(data.data)
        }).catch(error => {
          reject(error.toString())
        })
      })
    }

}

知识点总结

1.插件file-saver的使用

• a标签download属性下载不了跨域图片直接在浏览器预览，利用file-saver将跨域访问的图片下载
• 可以file-saver下载其他文件，详情可去参考其API
• 如果你需要保存较大的文件，不受 blob 的大小限制或内存限制，可以看一下更高级的 StreamSaver.js

2.插件jszip的使用

• 点击批量下载所有图片都在浏览器下载文件多表现不友好，需将批量下载的图片打包进压缩包里，故引进了JSZip进行打包
• JSZip是一个用于创建，阅读和编辑.zip文件的JavaScript库，具有友好而简单的API,详细用法可以参照其API

备注 ：

1. 注意的是responseType, 如果下载文件是文本类型的(如: .txt, .js之类的),那么用responseType: 2. 'text’也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer
2. 如果下载的文件过大, 打包的时间将会很长, 甚至可能会导致浏览器奔溃
3. 还需要注意的一点是请求图片资源时因其是异步请求，需要等所有图片请求完再进行打包这一步，在请求资源时需要await