|
目的 本教程的目錄是通過三個(gè)例子介紹如何在Html表單提交直傳OSS 第一個(gè)例子：講解如何在JS直接簽名，直接表單上傳到OSS 第二個(gè)例子：講解如何在從后端PHP獲取簽名，然后直接表單上傳到OSS 第三個(gè)例子：講解如何在從后端PHP獲取簽名及上傳后回調(diào)。然后直接表單上傳到OSS，OSS回調(diào)完應(yīng)用服務(wù)器再返回給用戶。 背景 每個(gè)用OSS的用戶，都會(huì)用到上傳。由于是網(wǎng)頁(yè)上傳，其中包括一些APP里面的h5頁(yè)面，對(duì)上傳的需求很強(qiáng)烈，很多人采用的做法是用戶在瀏覽器／APP上傳到應(yīng)用服務(wù)器，然后應(yīng)用服務(wù)器再把文件上傳到OSS。  這種方法有三個(gè)缺點(diǎn)， 第一：上傳慢，先上傳到應(yīng)用服務(wù)器，再上傳到OSS，網(wǎng)絡(luò)傳送多了一倍，而且OSS是采用BGP帶寬，能保證各地各運(yùn)營(yíng)商的速度。 第二：擴(kuò)展性不好，如果后續(xù)用戶多了，應(yīng)用服務(wù)器會(huì)成為瓶頸。 第三：費(fèi)用高，因?yàn)镺SS上傳流量是免費(fèi)的。如果數(shù)據(jù)直傳到OSS，不走應(yīng)用服務(wù)器。那么將能省下幾臺(tái)應(yīng)用服務(wù)器。 改進(jìn)方案1：客戶端用JS直接簽名，然后上傳到OSS  示例 下面我將介紹用plupload ，在JS端簽名然后直傳數(shù)據(jù)到OSS的例子 二維碼：可以用手機(jī)(微信，QQ，手機(jī)瀏覽器等）掃一掃試試 原理 本例子的功能 1.采用plupload 直接提高表單數(shù)據(jù)(即PostObject)到OSS 2.支持html5,flash,silverlight,html4 等協(xié)議上傳 3. 可以運(yùn)行在PC瀏覽器，手機(jī)瀏覽器，微信等 4.可以選擇多文件上傳 5.顯示上傳進(jìn)度條 6.可以控制上傳文件的大小 OSS的PostObject API細(xì)節(jié)可以參照(看不懂沒有關(guān)系)： plupload plupload是一款簡(jiǎn)單易用且功能強(qiáng)大， 擁有多種上傳方式，(html5, flash, silverlight, html4)等方式，會(huì)智能檢測(cè)當(dāng)前環(huán)境 選擇最適合的方式，并且會(huì)優(yōu)先采用Html5， 所以不用花心思去當(dāng)前的瀏覽器要用何種方式上傳，plupload會(huì)幫您考慮好。 關(guān)鍵代碼 因?yàn)镺SS原生支持POST協(xié)議。所以只要將plupload在發(fā)送POST請(qǐng)求時(shí)，帶上OSS簽名即可。 核心代碼如下：
簽名signature主要是對(duì)policyText進(jìn)行簽名，最簡(jiǎn)單的例子如下：
Cors（跨域訪問） 注意：如果一定要保證bucket屬性Cors設(shè)置支持POST方法。因?yàn)檫@個(gè)HTML直接上傳到OSS，會(huì)產(chǎn)生跨域請(qǐng)求。必須在bucket屬性里面設(shè)置允許跨域, 可以在OSS控制臺(tái)里面設(shè)置 代碼下載 http://files.cnblogs.com/files/ossteam/oss-h5-upload-js-direct.tar.gz
|
|
|
