OSS Web直传——使用Flash上传

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介:
OSS Web直传使用案例: 点击这里


好的。今天我讲解一下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
 
 
实例分析
下面是对上传的协议抓包分析:

Flash上传时,第一次时会请求crossdomain.xml这个文件。然后再进行POST操作
 
其中请求crossdomain.xml的请求格式如下:

 
注意我框住的部分,请求是没有带任何签名的。
 
基于请求成功,OSS回复如下:

 
大家可能会有疑问,因为请求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
 
 
设置的案例如下:

 
这个页面虽然填入你的id/key,但是往后端请求时,请求的签完名的串,所以后端没有办法知道你的id/key
所以你的id/key是安全,这个请放一百个心。

这个页面的原理是签名在前端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
 
 
代码下载:
签名在前端完成: 点击下载
签名在PHP完成(推荐): 点击下载
 
 
 
 
 
 
 
 
 
 
 
 

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
2月前
|
对象存储
minio临时凭证直传切换到阿里云oss
minio临时凭证直传切换到阿里云oss
178 1
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
7月前
|
对象存储
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
283 0
|
存储 对象存储
oss区分存储怎么把图片压缩后再上传?
oss区分存储怎么把图片压缩后再上传?
902 0
|
存储 前端开发 Java
四步解决!OSS对象存储文件上传功能(服务端签名后直传,建议收藏)
普通上传方式通过InputStream作为OSS文件的数据源。用户(浏览器)把文件交给我们自已的服务器,再由服务器携带相关验证信息上传文件至阿里云,这种方式每上传一次,文件就会经过一次我们自已的服务器(占用大量带宽),我们的服务器也会在大量的用户下带来瓶颈。影响服务器处理别的请求,大大降低了效率。
3437 0
四步解决!OSS对象存储文件上传功能(服务端签名后直传,建议收藏)
|
7月前
|
存储 域名解析 安全
Nest 实现OSS 服务端签名直传并设置上传回调
Nest 实现OSS 服务端签名直传并设置上传回调
354 0
|
7月前
|
存储 前端开发 JavaScript
Nestjs+Vue实现阿里云OSS服务端签名直传
阿里云 OSS 是常用的对象存储服务,借助其提供的 SDK,客户端(浏览器,小程序等)可以非常方便的将文件上传到 OSS 进行管理。
685 0
Nestjs+Vue实现阿里云OSS服务端签名直传
|
9月前
|
存储 前端开发 安全
oss服务端签名后直传分析与代码实现
oss服务端签名后直传分析与代码实现
685 0
|
小程序 JavaScript 前端开发
微信小程序:阿里云OSS直传实践-PHP实现服务端签名
微信小程序:阿里云OSS直传实践-PHP实现服务端签名
614 0
微信小程序:阿里云OSS直传实践-PHP实现服务端签名
|
存储 前端开发 Java
四步解决!OSS对象存储文件上传功能(服务端签名后直传,建议收藏)
四步解决!OSS对象存储文件上传功能(服务端签名后直传,建议收藏)
2553 2
四步解决!OSS对象存储文件上传功能(服务端签名后直传,建议收藏)

相关产品

  • 对象存储