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的例子
二维码：可以用手机(微信，QQ，手机浏览器等）扫一扫试试
原理
本例子的功能
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签名即可。
核心代码如下：
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进行签名，最简单的例子如下：
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控制台里面设置
设置如下图：
代码下载
https://files.cnblogs.com/files/ossteam/oss-h5-upload-js-direct.tar.gz
