Html直接表单直传阿里云存储OSS示例
Html直接表单直传阿里云存储OSS示例
·
Html直接表单直传阿里云存储OSS示例
目的
本教程的目录是通过三个例子介绍如何在Html表单提交直传OSS
第一个例子：讲解如何在JS直接签名，直接表单上传到OSS
第二个例子：讲解如何在从后端PHP获取签名，然后直接表单上传到OSS
第三个例子：讲解如何在从后端PHP获取签名及上传后回调。然后直接表单上传到OSS，OSS回调完应用服务器再返回给用户。
背景
每个用OSS的用户，都会用到上传。由于是网页上传，其中包括一些APP里面的h5页面，对上传的需求很强烈，很多人采用的做法是用户在浏览器／APP上传到应用服务器，然后应用服务器再把文件上传到OSS。
这种方法有三个缺点，
第一：上传慢，先上传到应用服务器，再上传到OSS，网络传送多了一倍，而且OSS是采用BGP带宽，能保证各地各运营商的速度。
第二：扩展性不好，如果后续用户多了，应用服务器会成为瓶颈。
第三：费用高，因为OSS上传流量是免费的。如果数据直传到OSS，不走应用服务器。那么将能省下几台应用服务器。
改进方案1：客户端用JS直接签名，然后上传到OSS
示例
下面我将介绍用plupload ，在JS端签名然后直传数据到OSS的例子
原理
本例子的功能
1.采用plupload 直接提高表单数据(即PostObject)到OSS
2.支持html5,flash,silverlight,html4 等协议上传
3. 可以运行在PC浏览器，手机浏览器，微信等
4.可以选择多文件上传
5.显示上传进度条
6.可以控制上传文件的大小
OSS的PostObject API细节可以参照(看不懂没有关系)：
plupload
plupload是一款简单易用且功能强大， 拥有多种上传方式，(html5, flash, silverlight, html4)等方式，会智能检测当前环境
选择最适合的方式，并且会优先采用Html5， 所以不用花心思去当前的浏览器要用何种方式上传，plupload会帮您考虑好。
关键代码
因为OSS原生支持POST协议。所以只要将plupload在发送POST请求时，带上OSS签名即可。
核心代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var
uploader =
new
plupload.Uploader({
runtimes :
'html5,flash,silverlight,html4'
,
browse_button :
'selectfiles'
,
//runtimes : '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'
,
url : host,
multipart_params: {
'Filename'
:
'${filename}'
,
'key'
:
'${filename}'
,
'policy'
: policyBase64,
'OSSAccessKeyId'
: accessid,
'success_action_status'
:
'200'
,
//让服务端返回200,不然，默认会返回204
'signature'
: signature,
},
....
}
|
签名signature主要是对policyText进行签名，最简单的例子如下：
|
1
2
3
4
5
6
|
var
policyText = {
"expiration"
:
"2020-01-01T12:00:00.000Z"
,
// 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
"conditions"
: [
[
"content-length-range"
, 0, 1048576000]
// 设置上传文件的大小限制,如果超过了这个大小，文件上传到OSS会报错的
]
}
|
Cors（跨域访问）
注意：如果一定要保证bucket属性Cors设置支持POST方法。因为这个HTML直接上传到OSS，会产生跨域请求。必须在bucket属性里面设置允许跨域, 可以在OSS控制台里面设置
设置如下图：
代码下载
http://files.cnblogs.com/files/ossteam/oss-h5-upload-js-direct.tar.gz
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)