使用场景是想做图片裁剪,直接传oss
基本步骤:
1,图片裁剪,产生base64字符串,略
2,base64转blob
3,blob添加到表单
4,ajax上传
具体:
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
3添加到表单:
var formParam = new FormData();
formParam.append("file",convertBase64UrlToBlob(base64Codes));
4,ajax提交:
$.ajax({
type: 'POST',
url: host ,
data:formParam ,
...
OSS需要额外增加授权:具体参考官方例子
额外传这些参数:
formParam.append("key",g_object_name);
formParam.append("policy",policyBase64);
formParam.append("OSSAccessKeyId",accessid);
formParam.append("success_action_status",'200');
formParam.append("signature",signature);