如何上傳base64圖片到七牛云存儲，然后返回圖片url呢？？

2024-04-27 15:17:58

字體：大中小

來源：轉載

供稿：網友

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

麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

如何上傳base64圖片到七牛云存儲，然后返回圖片url呢？？

如何上傳base64圖片到七牛云存儲，然后返回圖片url呢？？

前言

解決方法：

上傳到七牛云存儲的條件：

下面舉例：

以上是文章主要內容，如有錯誤，請多多交流

更多注意事項請參考- 七牛幫助文檔