服務端簽名後直傳OSS

上傳oss流程：客戶端(向網站服務器請求籤名) =》 網站服務器（服務器返回簽名） =》 客戶端（將獲取到的簽名放入URL中發送至oss驗證）=》 oss服務器

一.表單直傳oss優勢：
　　流程上---少了一步轉發，
　　架構上---走網站服務器，上傳量過大的時候，瓶頸在網站服務器，採用表單上傳後
　　上傳都是直接從客戶端發送到oss，上傳量過大時，壓力在oss上，而不在網站服務器上

二.前端須要什麼數據：
　　簽名裏面須要哪些數據：policyBase64（後臺定義base64編碼格式的受權策略） Signature（後臺經過policyBase64 +  AccessKeySecret計算出來的簽名），Expires（當前簽名的有效時間），OSSAccessKeyId， oss保存路徑/文件名

三.注意哪些問題
　　1.在上傳時候提示已經上傳成功可是在oss上面找不到上傳的文件：緣由是沒有定義上傳文件的名字 （key）
　　2.最好定義oss返回200，否則默認返回204
　　3.跟後臺約定好是使用url包含簽名仍是header包含簽名上傳，由於不一樣上傳方式後臺計算簽名方法不一致

//upLoad-oss-start 上傳視頻到oss

var headhttp = window.location.host;
if(headhttp != "www.abcd.com" || headhttp != "120.26.225.37:9999"){
　　headhttp = "localhost:8080/abcd";
}
var flog = false;
var objdata;
var file = this.files[0];
// 向服務端請求籤名並將返回信息賦值給全局變量objdata
$.ajax({
　　url:'http://'+headhttp+'/oss/webOss',
　　dataType:'json',
　　async:false,
　　data:{"contentType":file.type},
　　type:'post',
　　success:function(resp){
　　　　console.log(resp.code);
　　　　if(resp.code == 13000){
　　　　　　alert(resp.msg);
　　　　}else{
　　　　flog = true;
　　　　objdata = resp;
　　　　}
　　}
});

//flog是判斷服務端是否正確返回簽名
if(flog){
　　//由於上傳文件的名字跟路徑都是上傳以前定義好的，因此這裏直接將上傳後的文件路徑拼接好返回後臺
　　var VideoPath = objdata.data.domain+"/"+objdata.data.folder;
　　// 須要上傳到oss的數據
　　var glo_image_data = {
　　OSSAccessKeyId:objdata.data.accesskey,//須要根據本身的bucket填寫 詳情請見oss api
　　policy: objdata.data.policy.policy,//policyBase64規定了請求的表單域的合法性
　　signature: objdata.data.policy.useKeyId, //根據Access Key Secret和policy計算的簽名信息，OSS驗證該簽名信息從而驗證該Post請求的合法性
　　success_action_status:'200', // 讓服務端返回200,否則，默認會返回204
　　key: objdata.data.folder, //文件名字，可設置路徑
　　file:file
},
// oss外網訪問地址
glo_image_upload_url = "http://abcd.oss-cn-hangzhou.aliyuncs.com/ ";

// 上傳方法
function doUploadImage(url,data){
　　var oMyForm = new FormData();

　　for(var field_name in data){
　　　　oMyForm.append(field_name,data[field_name]);
　　}

　　var oReq = new XMLHttpRequest();
　　//上傳結果
　　oReq.onreadystatechange = function(e){
　　if(oReq.readyState == 4){
　　　　if(oReq.status==200){//這裏若是成功返回的是 success_action_status設置的值
　　　　　　dialog.hideLoading();
　　　　　　alert('成功');
　　　　　　// 這裏是將拼接好的文件連接返回給後臺
　　　　　　$.ajax({
　　　　　　　　url:'http://'+headhttp+'/oss/getVideoImg',
　　　　　　　　　　dataType:'json',
　　　　　　　　　　async:false,
　　　　　　　　　　data:{"videoPath":VideoPath},
　　　　　　　　　　type:'post',
　　　　　　　　　　success:function(result){
　　　　　　　　　　　　console.log(result.data);
　　　　　　　　　　　　if(result.code == 13000){
　　　　　　　　　　　　　　alert(result.msg);
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　VideoPath = VideoPath+"@oneposter"+"="+result.data+"@two";
　　　　　　　　　　　　ifrmImg = result.data;
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　})
　　　　　　// 這是富文本編輯器裏面須要用到的數據，不用管
　　　　　　urlBox.val(VideoPath);
　　　　}
　　}
};
oReq.open("POST", url);
// 在這裏提交數據到oss
oReq.send(oMyForm);
}
doUploadImage(glo_image_upload_url,glo_image_data);
}

//upLoad-oss-end