上传base64图片到七牛云存储

简单的说一下需求：将canvas绘画生成的图片上传至七牛。

用canvas生成的图片是base64编码，上传base64编码图片到七牛云公开的接口如下：

POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Crc32>/x:user-var/<EncodedUserVarVal>
Host: upload.qiniu.com
Authorization: UpToken <UpToken>
Content-Type: application/octet-stream

<Base64EncodedFileContent>

参数说明：

参数名称	必填	说明
/	是	文件大小。支持传入 -1 表示文件大小以 http request body 为准。
/	否	如果没有指定则：如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key，否则用 hash 值作 key。EncodedKey 需要经过 base64 编码。具体可以参照：URL 安全的 Base64 编码。
/	否	文件的 MIME 类型，默认是 application/octet-stream。
/	否	文件内容的 crc32 校验值，不指定则不进行校验。
Host		上传域名 up.qiniu.com 用于服务端上传，upload.qiniu.com 用于客户端的上传。

注意事项：

1、var url = “http://upload.qiniu.com/putb64/20264“; 这里的20264是你的图片的没经过base64处理的原图的字节大小。

在这里补充一下：

补充点
1、base64编码	base64 的格式为 “data:image/png;base64,****==”,逗号之前都是一些说明性的文字，我们只需要****部分
2、Base64图片编码原理	Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用’=’，因此编码后输出的文本末尾可能会出现1或2个’=’
3、当我们知道base64编码的图片的字符大小，怎么计算图片的文件流大小呢？	通过base64编码原理我们知道，base64的图片字符流中的每8个字符就有两个是用0补充，而且字符流的末尾还可能存在‘=’号，我们可以通过这个原理计算图片的文件流大小。

    
在这里遇到一个坑，
通过裁剪数组的方式获得/
如下代码：

 var arr = base64.split(",");
 var str = arr[1].split("==");
 var n = str[0].length;
 var Fsize=parseInt(n-(n/8)*2);

报错 {error: "illegal base64 data at input byte 4"}

获取文件大小的时候，切记要通过文件流的方式获取。而不是通过图片标签然后转换后获取

//把头部的data:image/png;base64,（注意有逗号）去掉
var arr = base64.split(','), 
mime = arr[0].match(/:(.*?);/)[1],
len = mime.length;
var subLen = parseInt(len + 13);
base64=base64.substring(subLen);
//通过base64编码字符流计算文件流大小函数
function fileSize(str) {
    var fileSize;
    //找到等号，把等号也去掉
    if (str.indexOf('=') > 0) {
       var indexOf = str.indexOf('=');
       str = str.substring(0, indexOf);//把末尾的’=‘号去掉
     }
    fileSize = parseInt(str.length - (str.length / 8) * 2);
    return fileSize;
}

2、xhr.setRequestHeader(“Authorization”, “UpToken 填写你从服务端获取的上传token”); 这里的UpToken与后面的字符串保留一个空格。后面跟上你在服务端请求的token的字符串。具体你通过什么样子的请求方式获得是客户自己要关心的事情。
    
    
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
    
    
好了，附上跑通的代码，希望能帮到你，当然，如果你有更好的方式实现，欢迎留言，学习学习

function putb64(base64) {
    var pic = base64.replace(/^.*?,/, '');
    $.ajax({
        type: 'post',
        url: "https://test.dankal.cn/wansj/public/index.php/api/Index/upToken",
        success: function (data) {
            var token = data.uptoken;
            // 把字符串转换成json
            function strToJson(str) {
                var json = eval('(' + str + ')');
                return json;
            }
            var url = "http://up-z0.qiniu.com/putb64/-1/";
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var keyText = xhr.responseText;
                    // 返回的key是字符串，需要装换成json
                    keyText = strToJson(keyText);
                    //keyText.key 是返回的图片文件名
                    var key = keyText.key;
                    var getToken = $('.token').val();
                    $.ajax({
                        type: 'post',
                        url: "http://test.dankal.cn/wansj/public/index.php/api/Index/getShareUrl",
                        data:{
                            token:getToken,
                            file_key:key,
                        },
                        success: function (data) {
                            var shareUrl = data.share_url;
                            console.log(shareUrl);
                        },
                        error: function () {
                            console.log("上传base64至七牛失败");
                        }
                    })
                }
            }
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader("Authorization", "UpToken " + token);
            xhr.send(pic);
        },
        error: function () {
            console.log("sendFile请求出错");
            $('.loading').html("亲，真抱歉，图片上传失败");
        }
    })
}