使用JS去批量下载OSS文件

直接上代码

需要使用的库
  • jszip (js把多个文件打包成zip)
  • file-saver (在浏览器实现保存文件)
// 下载图片
// 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)
  })
}
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!