在JavaScript中实现批量下载OSS中的文件代码示例

前端  /  管理员 发布于 2年前   852

使用JS去批量下载OSS文件需要的依赖库

jszip 

jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

url:

https://stuk.github.io/jszip/

file-saver 

著名开源项目 FileSaver.js,在浏览器实现保存文件

url:

https://github.com/eligrey/FileSaver.js

示例代码：

// 下载图片
// files 文件列表
// filename 保存到本地的文件名
function downloadMaterial(files, filename) {
  // 使用xhr请求获取文件内容
  function getImgBuffer(url) {
    return new Promise((reslove, reject) => {
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open("GET", url, true)
      xmlhttp.responseType = 'blob'
      xmlhttp.onload = function () {
        if (this.status == 200) {
          reslove(this.response)
        } else {
          reject()
        }
      }
      xmlhttp.send()
    })
  }
  const _zip = new zip()
  let promises = []
  // 请求多个文件，并把文件打包进 zip (这里先把请求存入 promises 数组, 实际并未请求)
  for (let i in files) {
    // 这里解释一下为啥用 Math.random()
    // 因为 oss 跨域策略是当请求 header 存在 origin 参数时才会返回对应 cors header
    // 由于 img 并未发送 origin 参数，所以页面渲染了图片，使用xhr再次请求时会使用缓存的信息，导致浏览器没有获取到允许跨域的 header 导致报错，使用 Math.random() 加了参数就用不到 img 缓存的信息了
    const promise = getImgBuffer(`${files[i]}?_r=${Math.random()}`).then((data) => {
      _zip.file(files[i].name, data, { binary: true })
    })
    promises.push(promise)
  }
  // 使用 Promise all 发送请求
  Promise.all(promises).then(() => {
    // 生成zip文件
    _zip.generateAsync({ type: 'blob' }).then(content => {
      // 使用 file-saver保存文件
      FileSaver.saveAs(content, filename)
    })
  }).catch(e => {
    console.log(e)
  })
}