VUE获取图片并压缩下载

用到的组件：file-saver、jszip。使用npm install一下

如果使用element-ui的话，已经整合了file-saver，只安装jszip就可以

VUE页面：

<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
...

methods: {
    
    // 下载zip包
    getImageZip(row) {
      // zip包的文件名称
      let name = '项目《' + row.projectName + '》图片信息.zip'
      
      // 下面的Loading组件是element-ui带的，可以不用
      let downloadLoadingInstance = Loading.service({
        text: "正在下载，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      })

      // 获取图片链接地址
      getProjectImage(row.bizId).then(response => {
        const zip = new JSZip()
        const promises = []
        const urls = []
        // 这里的item就是不同的url，每个url对应一张图
        response.data.images.forEach(item => {
          let fileName = item.substr(item.lastIndexOf('/') + 1, item.lastIndexOf('.'))
          const promise = getUrlFile(item).then(data => { // 根据url下载单个图片, 并存成ArrayBuffer对象
            zip.file(fileName, data, { binary: true }) // 逐个添加文件
          })
          promises.push(promise)
          urls.push(item)
        })

        Promise.all(promises).then(() => {
          zip.generateAsync({ type: "blob" }).then(content => { // 生成二进制流
            FileSaver.saveAs(content, name) // 利用file-saver保存文件
          })
          removeTempFile(urls)
          downloadLoadingInstance.close()
        })
      }).catcht(e => {
        downloadLoadingInstance.close()
      })
    }
}

</script>

JS文件：

// request是element-ui对axios的二次封装，用于发送简单请求
import request from "@/utils/request";    
// axios为发送请求的框架
import axios from "axios";

// 获取项目下的所有图片（返回的是所有图片的url，可以直接放到浏览器里访问到图片）
export function getProjectImage(id) {
  return request({
    url: "/api/project/getProjectImage/" + id,
    method: "get",
  });
}

// 获取url文件对象
export function getUrlFile(url) {
  return new Promise((resolve, reject) => {
    // 封装带baseURL的axios实例，baseUrl为后台地址
    const temp = axios.create({
      baseURL: process.env.VUE_APP_BASE_API,
      responseType: "arraybuffer",
    });
    // 发送请求获取资源
    temp
      .get(url)
      .then((data) => {
        resolve(data.data);
      })
      .catch((error) => {
        reject(error.toString());
      });
  });
}