如何利用后端给的url，前端下载图片、音频、视频等文件

后端给了url，让前端处理下载，刚开始只处理图片url下载，然后用最简单的方式，创建a标签，叫download属性，发现竟然不行，找了一下原因，原来是url地址跨域了，这里需要让后端处理一下服务器对url跨域问题，然后前端代码线上：

downPic(urls, fileName) {

const image = new Image()

// 解决跨域 Canvas 污染问题

image.setAttribute('crossOrigin', 'anonymous')

image.onload = () => {

const canvas = document.createElement('canvas')

canvas.width = image.width

canvas.height = image.height

const context = canvas.getContext('2d')

context.drawImage(image, 0, 0, image.width, image.height)

canvas.toBlob((blob) => {

const url = URL.createObjectURL(blob)

const a = document.createElement('a')

a.download = fileName || 'photo'

a.href = url

a.click()

a.remove()

URL.revokeObjectURL(url)

})

}

image.src = urls

后端处理服务器跨域问题之后，这种方式的确可以下载图片；但是！后来增加需求，要同时满足下载音频和视频，用这种方式就不行了！只能想其他办法：

后来去网上找了很多办法，最终了解到，想要下载音频和视频只能让后端把url转成文件流格式的数据，然后前端才能下载；上代码：

downPic(urls, fileName) {

let type = urls.split(".");

type = type[type.length - 1];

httpParmas(w_url.download, { fileUrl: urls }).then(res => {

if (res) {

let blobUrl = window.URL.createObjectURL(new Blob([res], { type: downType[type] }))

let link = document.createElement('a')

document.body.appendChild(link)

link.style.display = 'none'

link.href = blobUrl

// 设置a标签的下载属性，设置文件名及格式，后缀名最好让后端在数据格式中返回

link.setAttribute('download', fileName)

// 自触发click事件

link.click()

document.body.removeChild(link)

window.URL.revokeObjectURL(blobUrl);

}

})

标红的地方是重点，我这边要下载不同格式的文件，格式是前端这边来定的，后端不会告诉前端，然后我这边就只能通过传给后端接口的url的后缀名来匹配是什么格式的文件。

这时候遇到一个坑，接口通了但是下载不了，上图

这里一定要在接口的地方加上responseType:'blob'这个属性，然后文件就可以下载下来了；

最后说一下 type 格式可以去百度一下然后自己写个js 进行匹配！

如何利用后端给的url，前端下载图片、音频、视频等文件相关推荐

浏览器下载图片前端下载图片/音频/视频/PDF等所有浏览器可以解析的文件格式；解决通过window.open打开链接后是新标签页面而不是下载文件；
拷贝走放上文件路径直接使用(存在跨域的处理下跨域问题即可) this.$axios.get('要下载的文件路径', { responseType: 'blob'}).then(res=>{ ...
后端返回一个url前端怎么把音视频文件下载下来
后端返回一个url前端怎么把文件下载下来最近做的项目有一个用腾讯云上传音视频的功能,在后台管理里面需要将音视频下载下来,后端是直接返回腾讯云视频url地址的, // 点击下载文件downloadFi ...
Andrfoid 11 通过Glide下载图片音视频等文件，使用 MediaStore 和 ContentResolver 将文件保存到公共目录，跳过MANAGE_EXTERNAL_STORAGE权限
fun downloadFile(url: String) {Glide.with(this).asFile().load(url).listener(object : RequestListener ...
前端下载图片的N种方法
前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法. 先起个服务使用expressjs起个简单 ...
6种实现前端下载图片的方法汇总
来源 | https://www.cnblogs.com/wanglinmantan/p/15088419.html 前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说 ...
JavaScript 实现前端下载图片
JavaScript 实现前端下载图片前几天公司的项目有个需求,实现点击下载图片功能,当时我就想着还不简单嘛,当即写下以下代码: const download = document.createEl ...
前端下载base64格式视频
前端下载base64格式视频需求:后台传回base64格式视频,前端下载视频一.base64转blob /*** base64 to Blob**/ export function base64t ...
python web微信应用（五）自动下载接收的图片/语音/视频/普通文件
文章目录前言一.webwx 模块介绍二.自动下载接收的图片/语音/视频/普通文件到本地前言本篇文章作为系列第五篇文章,将实现自动下载接收到的图片.语音.视频.普通文件的功能: 系列其它文章请 ...
利用jsoup 如何从网页中下载图片
来自:http://www.open-open.com/bbs/view/1320576549952 如何从网页中下载图片如果做为爬虫很有必要从网页中下载图片到本地,那么我们利用jsoup来进行该操 ...

如何利用后端给的url，前端下载图片、音频、视频等文件

如何利用后端给的url，前端下载图片、音频、视频等文件相关推荐

最新文章

热门文章