上傳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