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

2019-11-02 18:23:01

字体：大中小

来源：转载

供稿：网友

如何上传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); }

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

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

前言

解决方法：

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

下面举例：

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

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