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

最新推荐文章于 2024-01-06 15:19:59 发布

吃饭callme

最新推荐文章于 2024-01-06 15:19:59 发布

阅读量1.1w

点赞数 7

分类专栏： web前端 js 文章标签：七牛 base64 url 图片云存储

本文链接：https://blog.csdn.net/chenyejunjun/article/details/54948002

版权

web前端 js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

前言

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

解决方法：

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

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

注册七牛云存储账号，开通一个云空间（废话）。
因为上传base64编码流图片到七牛需要知道原图片（即文件流）的图片的大小，怎么计算呢？参考- base64图片编码大小与原图文件大小之间的关系
服务端获取的上传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);

         }