不少同学开始使用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、安卓等各种系统下,可能会导致两个问题:中文文件名乱码、文件后缀没有或者变了