开发者社区> 问答> 正文

OSS学院:为什么我的图片会被下载?怎么在线播放影音?

leehon 2013-09-13 16:40:00 23908
不少同学开始使用oss存放自己的网站静态资源,包括图片,css、js以及一些媒体文件。不过很多人都遇到一个问题:把oss的图片地址复制到浏览器,没有显示,而是弹出了下载窗口,这是怎么回事呢?

论坛上有不少关于这个问题的帖子,虽然不影响在网页当中的使用,但我们有必要深入研究一下。实际上这跟文件的HTTP Header有关,我们把文件保存在OSS的时候,很多属性默认都是空的,所以产生了影响。

我们上传一张图片的时候,会得到这样的一个地址
http://ossheader.oss.aliyuncs.com/Teemo.jpg

这是默认的情况,我们在浏览器当中打开,不会显示,而是弹出下载窗口

我们要给图片增加属性,点每个文件后面的“属性”链接,打开属性浮动层,切换到“HTTP表头设置”,可以看到默认只有一个Content-Type属性,这是oss自动生成的,不同的文件类型各不相同,如jpg图片是image/jpeg、css文件是text/css,这个属性传播得比较广,不少人都有所了解,切忌不要随意修改,这些命名都是有国际规范的,大家有兴趣可以到w3c等地方深入了解。 http://www.w3school.com.cn/media/media_mimeref.asp





Content-Type由oss自动生成,一般不用我们操心。这里控制文件下载与显示,是另一个属性:
Content-Disposition


大家可以在下拉列表里找到这个属性,如果要显示一个文件,需要给他设置
inline



给大家一些效果:
图片: http://ossheader.oss.aliyuncs.com/Teemo_2.jpg

像音乐、视频文件也支持这么设置,如果你使用谷歌浏览器,点进去就能在浏览器播放
丁当—猜不透: http://ossheader.oss.aliyuncs.com/caibutou.mp3
某汽车广告mp4: http://ossheader.oss.aliyuncs.com/07.mp4






如果想下载一个文件,应该这么设置
attachment;filename="文件名.后缀"

比如: http://ossheader.oss.aliyuncs.com/84.jpg


看上去他是一个刮胡刀(图片),实际上他的确是一个刮胡刀(图片),但是你打开却发现他是一个电吹风(zip压缩文件)



这样大家应该很清楚这个属性的作用了,图片img标签、以及css引用,不设置也ok,只是专门打开会被下载,这一点上阿里云官方论坛也趟枪了,因为同样用的oss,点一下图片就会下载,这方面大家根据自己的情况考虑。

同时,一些你想下载的文件,推荐都进行设置。不设置有什么问题?大多数时候没问题,不过这种http头不规范,各种乱七八糟的浏览器,Windows、安卓等各种系统下,可能会导致两个问题:中文文件名乱码、文件后缀没有或者变了
前端开发 JavaScript 对象存储 Android开发 Windows
分享到
取消 提交回答
全部回答(13)
  • 简单爱0107
    2015-12-31 10:03:59
    回 14楼姚大嘴的帖子
    这个帖子已经是很久之前的了,上面介绍的方法已经失效了,要不强制下载现在要绑定自定义域名,或者结合CDN使用
    0 0
  • oss-dev
    2015-12-31 09:19:21
    有两个条件必须具备的:
    1. 用自己的域名访问,也就是需要cname
    2. 文件的Content-Type是否设置正确了,如果是application/oct-stream那肯定是下载的。
    0 0
  • 姚大嘴
    2015-12-30 22:32:09
    阿里云什么鬼东西啊,改了还是不行,
    改了为什么还是下载,难道还要重启什么吗?小白真心不知道,求教啊。

    -------------------------

    回 15楼oss-dev的帖子
    好吧,谢谢你了,准备安心用七牛了,阿里云太麻烦了,不搞了。
    0 0
  • jscopyright
    2015-04-10 17:45:05
    ReOSS学院:为什么我的图片会被下载?怎么在线播放影音?
    前提是不是要配置cname啊
    0 0
  • 毕姥爷
    2013-12-23 04:44:01
    回 10楼(ftp4oss) 的帖子
    如何配合ftp4oss批量设置,正为这个事头疼
    0 0
滑动查看更多

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程