COS上傳圖片Web端直傳實(shí)踐

1、COS傳圖片Web端直傳實(shí)踐前期準(zhǔn)備1. 登錄COS控制臺并創(chuàng)建存儲桶，得到Bucket（存儲桶名稱）和Region（地域名稱）。2. 登錄控制臺密鑰管理獲取您的項(xiàng)目Secretld和SecretKey03. 在COS控制臺，進(jìn)入新建的存儲桶，單擊【基礎(chǔ)配置】，配置CORS規(guī)則，配置示例如下圖:二、計(jì)算簽名簽名計(jì)算放在前端會暴麗SecretKey,因此我們把簽名計(jì)算過程放在后端實(shí)現(xiàn)，前端通過AJAX向后端獲取簽名結(jié)果.正式部署時(shí)請?jiān)诤蠖思右粚幽木W(wǎng)站本身的權(quán)限檢驗(yàn)。指引參考PHP和Node.js的簽名示例，其他語言請參照對應(yīng)的XMLSDK文檔。三、前端上傳方案A:使用AJAX傳AJAX傳需要瀏

2、覽器支持基本的HTML5特性，當(dāng)前方案使用的是XMLAPI的PutObject接口，操作指引：1. 按照步驟一、前期準(zhǔn)備的步驟.準(zhǔn)備好存儲桶。2. 創(chuàng)建iesi.html文件，修改下方代碼的Bucket和Region,復(fù)制5Jtest.htmi文件。3. 部署好后端的簽名服務(wù)，并修改test.html里的簽名服務(wù)地址。4. 把test.伽1放在Web服務(wù)器下，然后在瀏覽器訪問頁面，測試文件上傳功能。AjaxPut簡單上傳hi,h2font-weight;normal;#msgmargin-top:10px;AjaxPut上傳S低兼容到ie10.支持onprogress(function()/請

3、求用到的參數(shù)varBucket*test-1250000000*;varRegion-guangzhou;tocoltittps:*?Tittps:*:http:*;varprefixprotocol+V/1+Bucketcos/Regionfnyqcloudconv；/計(jì)算簽名vargetAuthorization=function(options,callback)varmethod(options.Method|gefl.toLowerCaseO;varkeyoptions.Key|:varpathnamekey.indexOfff)0?ke

4、y:T+key:varurl=,./sen/er/auth.php,;varxhrnewXMLHttpRequest();vardatamethod:method.pathname:pathname,；xhr.openfPOSr,url,true);xhr.setRequestHeader(*content-type*applicatiorVjson*);xhr.onloadfunction(e)if(e.target.responseText-actiondeny*)alertfactiondeny);elsecallback(e.target.responseText);；xhr.send

5、(JSON.stringify(data);；/上傳文件varuploadFilefunction(file,callback)varKey*dir/*;/這里指走上傳目錄和文件名getAuthorization(Method:PUT,Key:Keytfunction(auth)varurlprefix+Key;varxhrnewXMLHttpRequest();xhr.openCPUT.url,true);xhr.setRequestHeaderCAuthorization*.auth);xhr.onloadfunction0if(xhr.status200|xhr.sta

6、tus=206)varETagxhr.getResponseHeader(*etag*);callback(null,url:url,ETag:ETag);elsecallback伐件Key*上傳失敗.狀態(tài)碼：*xhr.status);；xhr.onerrorfunction()callback(文件JKey+上傳失敗.請檢查是否沒配胃CORS跨域規(guī)則)；xhr.send(file);)；/監(jiān)聽衰單提交document.getElementByldCsubmitBtnyonclick=function(e)varfiledocument.getElementByld(*fileSelector

7、).files(0;if(Ifile)ctocument.gotElementByIdChisg9).innerText未選擇上傳文件；return;file&uploadFileffile,function(err,data)console.logierr|data);document.getElementByldCmsgyinnerTexterr?err:C上傳成功.ETag令data.ETag);)；)0；執(zhí)行效果如下圖:II方案B:使用Form表單上傳Form表單上傳支持低版本的瀏覽器的上傳（如IE8）,當(dāng)前方案使用的是XMLAPI的PostObject接口。操作指引:1. 按照步驟一

8、、前期準(zhǔn)備的步驟.準(zhǔn)備好存儲桶。2. 創(chuàng)建test.html文件，修改下方代碼的Bucket和Region,復(fù)制5Jtest.html文件。3. 部署好后端的簽名服務(wù)，并修改test.html里的簽名服務(wù)地址。4. Stest.htm同一個(gè)目錄下創(chuàng)建一個(gè)空的empty.html,用于上傳成功時(shí)跳轉(zhuǎn)回來。5. 把lest.html和empiy.html放在Web服務(wù)器下，然后在瀏覽器訪問頁面，測試文件上傳功能。Form衰單簡單上傳h19h2font-weight:normal;#msgmargin-top:10px;Form表單簡單上傳(兼容IE8)S低兼容到ie6上傳.不支持o叩rogress

9、inputid=successactionredirectname=-successaction_redirecttype=hidden*value，inputid-x-cos-security-tokenMname-x-cos-security-tokentype=whiddenvaluer、inputid-submitBlnMtypebuttonvalue-提交、(function()/情求用到的參數(shù)varBucket=*test-1250000000*;varRegionap-guangzhou*;tocolhttps/?Wps:-:htt

10、p:*;varprefixprotocol+Vf+Bucket,.cos.*Region令myqcloudcom/*;varformdocument.getElementByldfform*);form.actionprefix;計(jì)算簽名vargetAuthorization=function(options,callback)varmethod(options.Method|*get*).toLowerCaseO；varkeyoptions.Key|:/varurl,:3000/sts-post-object*+varurl./sen/er/sts-post-o

11、bject.php,+method-*method*&pathname=*encodeURIComponentfr)令*&key=+encodeURIComponent(key);varxhrnewXMLHttpRequest();xhr.open(*GET.url,true);xhr.onreadystatechangefunction(e)if(xhr.readyState4)if(xhr.status200)vardata=JSON.parse(xhr.responseText);callback(null,Authorization:data.authorization.XCosSec

12、urityToken:data.sessionToken,)；elsecallbackf獲取簽名出錨)；xhr.send();；/監(jiān)聽上傳完成varKey;varoubmitTargctdocumcnt.gctElcmcntByldCsubmitTargct);varshowMessagefunction(err.data)consoleog(enr|data);document.getElementByldCmsgyinnerTexterr?err:(上傳成功.ETagdata.ETag);；submitTarget.onloadfunction()varsearch;trysearchsu

13、bmitTarget.conlenlWindowocalion.searchsubstr(1);catch(e)showMessage(文件令Key*上傳失敗7;if(search)varitemssearch.split(*&);vari,arr,data;for(i0;iitems.length;arrItems,splits);data(arr(0decodeURIComponent(arr(1|J;showMessage(nulhurl:prefix+Key.ETag:data.etag);else；/發(fā)起上傳document.getElementByldCsubmitBtnyoncl

14、ickfunction(e)varfilePathdocument.getElementByldCfileSelectoiQ.value;if(IfilePath)document.getElementByldCmsgyinnerText未選擇上傳文件：return;Key-dirf+filePath.match(/WV?(A/+)$/)1;/這里指定上傳目錄和文件名getAuthorization(Method:POST,Key:Key,function(err.AuthDa/在當(dāng)前目最下放一個(gè)空的emptyhtml以便讓接上傳完成跳轉(zhuǎn)回來document.getElementByld(,si)ccess_action_redirect,).valuelocation.href.substr(0.location.href.lastlndexOff/1)4