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的例子

样例：http://oss-demo.aliyuncs.com/oss-h5-upload-js-php/index.html

原理

本例子的功能

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会报错的 
      ] 
 } 
 