Html直接表单直传阿里云存储OSS示例

 

目的   
本教程的目录是通过三个例子介绍如何在Html表单提交直传OSS
第一个例子:讲解如何在JS直接签名,直接表单上传到OSS
第二个例子:讲解如何在从后端PHP获取签名,然后直接表单上传到OSS
第三个例子:讲解如何在从后端PHP获取签名及上传后回调。然后直接表单上传到OSS,OSS回调完应用服务器再返回给用户。
 
背景 
每个用OSS的用户,都会用到上传。由于是网页上传,其中包括一些APP里面的h5页面,对上传的需求很强烈,很多人采用的做法是用户在浏览器/APP上传到应用服务器,然后应用服务器再把文件上传到OSS。
  Html直接表单直传阿里云存储OSS示例_第1张图片
这种方法有三个缺点,
第一:上传慢,先上传到应用服务器,再上传到OSS,网络传送多了一倍,而且OSS是采用BGP带宽,能保证各地各运营商的速度。
第二:扩展性不好,如果后续用户多了,应用服务器会成为瓶颈。
第三:费用高,因为OSS上传流量是免费的。如果数据直传到OSS,不走应用服务器。那么将能省下几台应用服务器。
 
改进方案1:客户端用JS直接签名,然后上传到OSS
Html直接表单直传阿里云存储OSS示例_第2张图片
 
示例   
下面我将介绍用plupload ,在JS端签名然后直传数据到OSS的例子
样例:http://oss-demo.aliyuncs.com/oss-h5-upload-js-php/index.html
二维码:可以用手机(微信,QQ,手机浏览器等)扫一扫试试
Html直接表单直传阿里云存储OSS示例_第3张图片
 
原理                  
本例子的功能
1.采用plupload 直接提高表单数据(即PostObject)到OSS
2.支持html5,flash,silverlight,html4 等协议上传
3. 可以运行在PC浏览器,手机浏览器,微信等
4.可以选择多文件上传
5.显示上传进度条
6.可以控制上传文件的大小
 
OSS的PostObject API细节可以参照(看不懂没有关系):
https://docs.aliyun.com/#/pub/oss/api-reference/object&PostObject
 
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控制台里面设置 
设置如下图: 

 Html直接表单直传阿里云存储OSS示例_第4张图片

代码下载 


http://files.cnblogs.com/files/ossteam/oss-h5-upload-js-direct.tar.gz 

 

转载于:https://www.cnblogs.com/ossteam/p/4942227.html

你可能感兴趣的:(php,后端)