如何上传base64图片到七牛云存储，然后返回图片url呢？？

如何上传base64图片到七牛云存储，然后返回图片url呢？？

前言

在做项目时，有时候我们需要把canvas中的图画导出成为图片，但我们知道导出来的图片是base64的字符流图片，而这种编码图片在手机端是无法长按保存的。那该怎么办呢？怎么才能在手机端也能保存这种图片呢？

解决方法：

我们可以先把base64编码图片上传到七牛云存储，然后通过返回的url，给到img标签中，这样就可以实现base64移动端的长按保存了。

上传到七牛云存储的条件：

1. 注册七牛云存储账号，开通一个云空间（废话）。
2. 因为上传base64编码流图片到七牛需要知道原图片（即文件流）的图片的大小，怎么计算呢？参考- base64图片编码大小与原图文件大小之间的关系
3. 服务端获取的上传token（需要通过七牛的AccessKey和SecretKey通过后端服务器获取，不过有大神做好了在线生成token的工具，如果相信他/她的话，可以使用- 七牛上传凭证生成器，不过AccessKey和SecretKey还是不要暴露为好）

下面举例：

    /*picBase是base64图片带头部的完整编码*/    function putb64(picBase){            /*picUrl用来存储返回来的url*/            var picUrl;            /*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/            picBase=picBase.substring(22);            /*通过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;            }            /*把字符串转换成json*/            function strToJson(str)            {                 var json = eval('(' + str + ')');                 return json;             }             var url = "http://up.qiniu.com/putb64/"+fileSize(picBase);             var xhr = new XMLHttpRequest();            xhr.onreadystatechange=function()            {                if (xhr.readyState==4){                    var keyText=xhr.responseText;                    /*返回的key是字符串，需要装换成json*/                    keyText=strToJson(keyText);                    /* http://ojvh6i96g.bkt.clouddn.com/是我的七牛云空间网址，keyText.key 是返回的图片文件名*/                    picUrl="http://ojvh6i96g.bkt.clouddn.com/"+keyText.key;                    alert(picUrl);                }            }            xhr.open("POST", url, true);             xhr.setRequestHeader("Content-Type", "application/octet-stream");             xhr.setRequestHeader("Authorization", "UpToken 这里填写你的token（注意前面的UpToken后面有空格）");             xhr.send(picBase);         }

以上是文章主要内容，如有错误，请多多交流

更多注意事项请参考- 七牛帮助文档