开发者社区> 问答> 正文

Flash直传OSS示例

之前有写过文章讲过http://bbs.aliyun.com/read/262307.html?spm=5176.bbsr258987.0.0.adua7x
有很多朋友私信我能否给出Flash上传的示例。
好的。今天我讲解一下Flash上传的示例。


Flash上传我还是采用pupload上传插件。做法是将 pupload 的runtimes 改成:flash
var uploader = new plupload.Uploader({
    browse_button : 'selectfiles',
    runtimes : 'flash',  //设成flash,就是flash的方式上传
    container: document.getElementById('container'),
    flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
    silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',



Flash上传跟Html5 上传的区别与联系

两者采用上传的协议都是POST,  发送请求的内容格式是一样。唯一的区别在于对于跨域的设置,
Hmlt5是采用Cors的设置。 而Flash是采用获取crossdomain.xml的方式


Flash上传流程
即客户端flash上传时,会向上传的源站请求一个crossdomain.xml,flash通过crossdomain.xml的内容,判断本次上传是否符合规则。所以如果您的bucket想要支持flash上传,你的bucket必须有一个名字叫crossdomain.xml的object存在。


crossdomain.xml
crossdomain.xml的内容定义了对于上传的授权策略
具体细节可以参考:http://www.adobe.com/cn/devnet/adobe-media-server/articles/cross-domain-xml-for-streaming.html
这里我定义一个最简单的上传策略
<?xml version="1.0"?>
<cross-domain-policy><site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*"/>
</cross-domain-policy>

将该crossdomain.xml保存到您要设置的bucket里面。


测试实例
通过该例子上传,可以选择多文件,上传有进度条。能上传大文件。
http://oss-demo.aliyuncs.com/oss-flash-upload-js-direct/index.html


实例分析
下面是对上传的协议抓包分析:
[attachment=89190]
Flash上传时,第一次时会请求crossdomain.xml这个文件。然后再进行POST操作

其中请求crossdomain.xml的请求格式如下:
[attachment=89192]

注意我框住的部分,请求是没有带任何签名的。

基于请求成功,OSS回复如下:
[attachment=89191]

大家可能会有疑问,因为请求crossdomain.xml是没有带签名的,如果我的bucket是私有的,不带签名请求bucket里crossdomain.xml这个文件,肯定不成功,是不是意味着私有的bucket不支持flash上传。
这个答案当然是不管是私有的还是共有的bucket都是支持flash上传。


私有的bucket支持
上述问题的解决方法是通过Object Acl来实现。Object Acl可以参考文档:

ObjectAcl
ObjectAcl其实就是Object级别的权限管理。如我的bucket是私有的。但是我可以对于某一个文件设置一个其他权限。
在这里,我可以将crossdomain.xml这个object的object 权限设成公共读。即读这个私有bucket: post-test 里面的crossdomain.xml这个文件,不需要带签名也能读取。

如何设置object acl呢?
基于官方文档,我做了这样一个简单的demo 可以通过下面这个页面完成。
http://oss-demo.aliyuncs.com/image/object-acl.html


设置的案例如下:
[attachment=89197]

这个页面虽然填入你的id/key,但是往后端请求时,请求的签完名的串,所以后端没有办法知道你的id/key
所以你的id/key是安全,这个请放一百个心。
[attachment=89206]
这个页面的原理是签名在前端js代码,因为有cors限制。js发送http request有限制。所以将js签名后的内容,发送到后端。由后端PHP程序,发送请求。并把结果返回。所以后端没有办法知道您所设置的id/key。 因为从签名后的内容是推算不出AccessId/AccessKey 。如上述图。


注意一点:因为本案例是签名在前端完成,有Accessid/AccessKey泄漏的风险。所以推荐签名在后端完成。可以参考例子:


http://oss-demo.aliyuncs.com/oss-flash-upload-js-php/index.html


代码下载:
签名在前端完成:[attachment=89207]
签名在PHP完成(推荐):[attachment=89208]











展开
收起
kkjuly 2015-11-20 14:25:08 9316 0
2 条回答
写回答
取消 提交回答
  • ReFlash直传OSS示例
    如果不用插件,直接用原生的as3 API,怎么实现呢?
    2017-03-06 18:54:53
    赞同 展开评论 打赏
  • 好文,要顶,
    2015-11-20 15:31:33
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
OSS运维进阶实战手册 立即下载
《OSS运维基础实战手册》 立即下载
OSS运维基础实战手册 立即下载