后端返回一个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()
}
},