服务端签名后直传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

转载于:https://www.cnblogs.com/wang-xing/p/7427664.html