后端返回一个url前端怎么把音视频文件下载下来

最新推荐文章于 2024-11-12 16:57:10 发布

原创最新推荐文章于 2024-11-12 16:57:10 发布 · 3.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#js #web #vue

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种从前端实现音视频文件下载的方法。通过检测URL协议类型并进行适配处理，利用XMLHttpRequest发起GET请求获取文件为blob数据，再通过创建a标签实现自动下载。

后端返回一个url前端怎么把文件下载下来

最近做的项目有一个用腾讯云上传音视频的功能，在后台管理里面需要将音视频下载下来，后端是直接返回腾讯云视频url地址的，

    // 点击下载文件
    downloadFile(file) {
        // 音视频下载
        if (file.url.indexOf('http://') >=0 || file.url.indexOf('https://') >= 0) {
          let handleUrl = ''
          // 本站用的https:// 接口返回的http，这样可能会跨域导致无法下载，这里手动将字符串的http转一下
          if (location.protocol === 'https:') {
            handleUrl = file.url.replace('http://', 'https://')
          } else {
            handleUrl = file.url
          }
          const loading = this.$loading({
            lock: true,
            text: '正在下载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          var xhr = new XMLHttpRequest()
          xhr.open("GET", handleUrl, true)
          xhr.responseType = 'blob'
          xhr.onload = function(e){
            if (e.target.readyState === 4 && e.target.status === 200) {
                let blob = this.response
                // 转换一个blob链接
                let u = window.URL.createObjectURL(new Blob([blob]))
                let a = document.createElement('a');
                a.download = file.fileName
                a.href = u
                a.style.display = 'none'
                document.body.appendChild(a)
                a.click()
                a.remove()
                loading.close()
            }
          }
          xhr.send()
        }
    },