服务端签名后上传文件到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