阿里云oss直接下载的小技巧

 

需求：

　　　　点击图片的下载链接直接触发浏览器下载，而不是浏览器打开图片。

 

思路：

　　　　1、谷歌浏览器在点击图片链接的时候往往是直接打开图片而不是下载；

　　　　2、首先考虑的是在a标签上增加download属性来触发下载，但是由于该属性有跨域限制，导致失效；

　　　　3、其次考虑在Response头上增加“Content-Disposition“字段，格式为“Content-Disposition=attachment;filename=abc.png”；

　　　　4、由于文件存储在OSS上，给的下载地址是直接从OSS下载的，经过查询阿里云的文档后，发现只要在上传的Form表单中增加Content-Disposition属性，下载时OSS服务器返回的Response中就会自动携带了该字段。

 

相关资料：

　　截取自阿里云文档中关于对上传到OSS描述的部分资料：

　　

　　　　说明 OSS支持HTTP协议规定的5个请求头：Cache-Control、Expires、Content-Encoding、Content-Disposition、Content-Type。如果上传Object时设置了这些请求头，则该Object被下载时，相应的请求头值会被自动设置成上传时的值。

 

名称	类型	是否必选	描述
Authorization	字符串	否	表示请求本身已被授权，详情请参见RFC2616。 通常情况下Authorization是必选请求头，但如果采用了URL包含签名，则不用携带该请求头。详情请参见在URL中包含签名。 默认值：无
Cache-Control	字符串	否	指定该Object被下载时网页的缓存行为，详情请参见RFC2616。 默认值：无
Content-Disposition	字符串	否	指定该Object被下载时的名称，详情请参见RFC2616。 默认值：无

 

　　截取自MSDN中关于对Content-Disposition描述的部分资料：

　　　　

　　　　在常规的HTTP应答中，Content-Disposition 响应头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

　　　　

　　　作为消息主体中的消息头

　　　　在HTTP场景中，第一个参数或者是inline（默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示），或者是attachment（意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框，将filename的值预填为下载后的文件名，假如它存在的话）。

　　  Content-Disposition: inline
　　  Content-Disposition: attachment
　　  Content-Disposition: attachment; filename="filename.png"

 

 

代码：

/** formData为上传的表单对象 **/
formData.append(\'Content-Disposition\', \'attachment;filename=\' + file.name); // file.name就是要下载的文件的名称

　　

 实现的效果：

charles抓包显示Response中携带了该字段：

 

 

在谷歌浏览器下表现为直接下载而不是打开图片：