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

后端返回一个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()
        }
    },
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值