laravel8+quasar2+a标签 跨域下载视频文件

1.过程

为了实现跨域下载视频,经历很多。。。

  • 首先,quasar(版本2.6.1):quasar.config.js的devServer中添加代理,设置跨域访问,好用但发现只能开发环境使用(打包前好用,打包后不好用)方法也放下边了
  • 然后,在网上一顿搜,找到用apache配置代理的方法,当然还有nginx配置代理什么的,我直接用的apache,好用,但客户那边由于某些原因,不允许配置。方法也放下边了,留作备忘
  • 最后!如果能返回文件流,再下载,不就不存在跨域的问题了么!又经过一顿搜索,终于弄出来了

在此感谢各位大佬,搜索的是在太多了,落下谁的话请见谅

  • 【文档流下载——axios+fetch两种方式下载】https://blog.csdn.net/yehaocheng520/article/details/127771893
  • 【前端下载文件方法分享】https://blog.csdn.net/YX0711/article/details/126801895
  • 【用apache代理解决ajax跨域问题】https://blog.csdn.net/weixin_30838873/article/details/94876951?spm=1001.2014.3001.5506

2.【最终方案!】laravel返回blob类型的文档流,使用a标签跨域下载

后台
使用laravel自带的download方法,返回文件流
官方文档:https://learnku.com/docs/laravel/10.x/filesystem/14865#5dfd5a

Route::get('fncVideoDownload', function () {
	return Storage::disk('sftp')->download('upload/video/123.mp4');
});

或者

Route::get('fncVideoDownload', function () {
     return response()->stream(function () {
        //echo file_get_contents("http://123.456.7.89/upload/video/uploadr/bbb.jpeg");// image/jpeg
        echo file_get_contents("http://123.456.7.89/upload/video/aaa.mp4");// video/mp4
    }, 200, ['Content-Type' => 'video/mp4']);
 });

前台

<template>
<a
  id="fileDownload"
  href=""
  download=""
  target="_blank"
  style="display: none"
></a>
</template>
<script lang="ts">
function download(){
	//创建的a标签
	const link = document.getElementById('fileDownload')
	if (link) {
		//想传到后台的参数
		const params = {
			aa: 'aaaa',
		}
		//interfaceUrl:路由URI
		let responsedata: Blob = await axios.get(
		  'interfaceUrl',
		  {
		    params,
		    //必须写
		    responseType: 'blob',
		  }
		)
		const blobUrl = window.URL.createObjectURL(responsedata)
		link.setAttribute('href', blobUrl)
		link.setAttribute('download', 'newname.mp4')
		link.click()
		window.URL.revokeObjectURL(blobUrl)
	}
}
</script>

3.【备忘用】apache 配置代理

/usr/local/etc/apache24/httpd.conf中下边四个解开

LoadModule proxy_module libexec/apache24/mod_proxy.so
LoadModule proxy_connect_module libexec/apache24/mod_proxy_connect.so
LoadModule proxy_ftp_module libexec/apache24/mod_proxy_ftp.so
LoadModule proxy_http_module libexec/apache24/mod_proxy_http.so

再添加:

proxypass /videodownload http://123.456.7.89

proxypass /videodownload http://123.456.7.89/upload/video 这种直接给文件夹带上也行

重启apache即可

4.【备忘用】quasar 配置代理,仅开发环境使用

quasar.config.js(文件在根目录中)的devServer中添加代理,设置跨域访问
在这里插入图片描述代码复制↓

proxy:{
     //随便起的名字
	'/videodownload': {
	// 目标地址
	target: 'http://123.456.7.89',
	// 跨域访问设置,true代表跨域
	changeOrigin: true,
	//前缀删除
	rewrite: path => path.replace(/^\/videodownload/, '')
	}
}

开发前先直接在浏览器输入地址看看视频存不存在

在这里插入图片描述
下载方法有两个,此处都记录下来,都好用

//===== method 1 ========================
var x = new XMLHttpRequest()
x.open('GET', '/videodownload/upload/video/123.mp4', true)
x.responseType = 'blob'
x.onload = function (e) {
  const url = window.URL.createObjectURL(x.response)
  link.setAttribute('href', url)
  link.setAttribute('download', 'newname.mp4')
  link.click()
}
x.send()
//===== method 2 ========================
let blob = await fetch('/videodownload/upload/video/123.mp4').then((r) => r.blob())
const blobUrl = window.URL.createObjectURL(blob)
link.setAttribute('href', blobUrl)
link.setAttribute('download', 'newname.mp4')
link.click()
window.URL.revokeObjectURL(blobUrl)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值