Vue批量下载并打包成zip

Vue批量下载并打包成zip

第一次写博客，主要是记录一下此次工作中的一个需求，后端大佬有点忙，前端小弟只好自己上手了
需求描述很简单：
在手机端上传的图片、视频到pc端下载成一个压缩包文件zip，解压后可正常查看

学习了网上一些例子，做了一些修改

1.依赖包
axios、jszip、file-saver

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

2.重写请求方法（主要是因为项目中用的axios是封装好的，所以直接在页面中引入了一个）

methods: {
      getFile(url){
        let that = this;
        return new Promise((resolve, reject) => {
          axios({
            method:'get',
            url,
            responseType: 'blob'
          }).then(data => {
            resolve(data.data)
          }).catch(error => {
            // 在此写入你的错误处理
            // 可以在此处处理promise.all失败的情况，放在methods里主要也是为了方便对data里的变量处理
            reject(error.toString())
          })
        })
      },
    }

3.下载文件

 methods:{
    handleBatchDownload() {
      const data = [
        '/zip/1.mp4',
        '/zip/2.png'] // 需要下载打包的路径, 此处我是阿里云的跨域路径, /zip来源 参看第四条
      const zip = new JSZip()
      const cache = {}
      const promises = []
      data.forEach(item => {
        const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
          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") // 利用file-saver保存文件
        })
      })
    },
  }

4.设置代理（我是用/zip来设置本地代理的xxx.aliyun.com，当然也要修改线上nginx配置等）

	proxyTable: {
      '/zip': {
        target: 'http://xxx.aliyun.com/',  //目标接口域名
        pathRewrite: {
          '^/zip': ''   //重写接口
        },
        changeOrigin: true,  //是否跨域
      },
    },

总结

其实只是在网上一些例子的基础上多加了一步代理，不知道别人是如何解决跨域这个问题的，简单做一下记录，有什么问题也欢迎指正

参考链接：点这里