"最近做一个有视频课程的项目,前端有个问题一直解决不了,跑过来问我,原来是这样的,课程中上传的视频可以预览、可以下载,预览倒是没问题,前端上传成功之后上传服务器会返回 url 地址,直接使用 video 播放就行了,但是下载不知道怎么搞了,在新页面打开的话也是直接播放了,这是因为视频是 mp4 格式,很多浏览器直接支持播 .."

使 nginx 支持 a 标签下载文件

最近做一个有视频课程的项目,前端有个问题一直解决不了,跑过来问我,原来是这样的,课程中上传的视频可以预览、可以下载,预览倒是没问题,前端上传成功之后上传服务器会返回 url 地址,直接使用 video 播放就行了,但是下载不知道怎么搞了,在新页面打开的话也是直接播放了,这是因为视频是 mp4 格式,很多浏览器直接支持播放,下载的目的是让用户保存到本地,虽然可以再这个新页面右键保存视频,但是对于一般用户来说还是不够直观。
在网上查找了一下,html5 中 a 标签有个 download 属性,用来规定被下载的文件名称,比如下面的连接来下载图片:
<a href="/images/abc.jpg" download="abc”>

但是兼容性不是太好
屏幕快照20190711上午10.44.14.png
只有 Firfox 和 Chrome 支持 download 属性,所有不太可行。

前端解决不了只能后端解决了,响应头 Content-Disposition 加上 attachment 的时候,浏览器会激活下载操作,所以我们再返回文件的时候加上这个头应该就可以了,由于使用的是 nginx ,所以直接修改响应的配置文件即可:

location ~ \.mp4{
        # 如果请求地址中有请求参数?download=1,那么就视为下载操作
	if ( $query_string ~* "download=1" ) {
		add_header Content-Disposition attachment;
	}
	mp4;
}

重启 nginx:
sudo nginx -s reload
前端就可以使用 a 连接来下载文件了
<a href="/images/abc.jpg?download=1” download="abc”>

  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    206 引用 • 420 回帖 • 695 关注
回帖   
请输入回帖内容...