服務端簽名後上傳檔案到oss
上傳oss流程：客戶端(向網站伺服器請求籤名) =》 網站伺服器（伺服器返回簽名） =》 客戶端（將獲取到的簽名放入URL中傳送至oss驗證）=》 oss伺服器
1.表單直傳oss優點：
流程上—少了一步轉發，
架構上—走網站伺服器，上傳量過大的時候，瓶頸在網站伺服器，採用表單上傳後
上傳都是直接從客戶端傳送到oss，上傳量過大時，壓力在oss上，而不在網站伺服器上
2.前端需要什麼資料：
1.簽名裡面需要哪些資料：policyBase64（後臺定義base64編碼格式的授權策略） Signature（後臺通過policyBase64 + AccessKeySecret計算出來的簽名），Expires（當前簽名的有效時間），OSSAccessKeyId， oss儲存路徑/檔名
3.注意哪些問題
1.在上傳時候提示已經上傳成功但是在oss上面找不到上傳的檔案：原因是沒有定義上傳檔案的名字 （key）
2.最好定義oss返回200，不然預設返回204
3.跟後臺約定好是使用url包含簽名還是header包含簽名上傳，因為不同上傳方式後臺計算簽名方法不一致
//upLoad-oss-start 上傳視訊到oss
console.log(window.location.host);
var headhttp = window.location.host;
if(headhttp != “www.huakr.com” || headhttp != “120.26.225.37:9999”){
headhttp = “localhost:8080/huahan”;
}
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://huahan.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