传base64png图片到AliyunOSS

使用场景是想做图片裁剪,直接传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);

发表评论