思路:
- 谷歌浏览器在点击图片链接的时候往往是直接打开图片而不是下载;
- 首先考虑的是在a标签上增加download属性来触发下载,但是由于该属性有跨域限制,导致失效;
- 其次考虑在Response头上增加“Content-Disposition“字段,格式为“Content-Disposition=attachment;filename=name.png”;
- 由于文件存储在OSS上,给的下载地址是直接从OSS下载的,经过查询阿里云的文档后,发现只要在上传的Form表单中增加Content-Disposition属性,下载时OSS服务器返回的Response中就会自动携带了该字段。
查阅阿里云相关文档https://help.aliyun.com/document_detail/31978.htmlspm=a2c4g.11186623.6.1516.72947d2d51qlyq
OSS支持HTTP协议规定的5个请求头Cache-Control、Expires、Content-Encoding、Content-Disposition、Content-Type。如果上传Object时设置了这些请求头,则下载该Object时,相应的请求头的值会自动使用上传Object时设置的值。
在常规的HTTP应答中,**Content-Disposition**
响应头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。(MDN链接https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition)
代码实现:
formData.append('Content-Disposition'
, 'attachment;filename='` `+ file.name);
/ / file.name就是要下载的文件的名称
以上就是项目中遇到的一个关于基于chrome的oss直接下载的方法。但是同学们也需留意,由于不同浏览器对不同的图片格式识别不同,保不齐功能中的图片格式在这个浏览器就是不可识别,直接点击下载了。亦或者咱们的PD开明,默认点击图片满足预览大图或下载其中一个功能就可,岂不美哉。