亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

如何上傳base64編碼圖片到七牛云

作者:娇娇jojo

时间:2018年6月19日


上传普通的jpg、png到七牛,可以参考这篇文章:http://www.xianlaiwan.cn/article/37041

下面就来介绍一下如何上传 base64 图片到七牛吧。


1、接口说明

POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Crc32>/x:user-var/<EncodedUserVarVal>

Host: upload.qiniup.com

Authorization: UpToken <UpToken>

Content-Type: application/octet-stream

<Base64EncodedFileContent


参数名称必填说明
/<Fsize>文件大小。支持传入 -1 表示文件大小以 http request body 为准。
/<EncodedKey>如果没有指定则:如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key,否则用 hash 值作 key。EncodedKey 需要经过 base64 编码。具体可以参照:URL 安全的 Base64 编码
/<EncodedMimeType>文件的 MIME 类型,默认是 application/octet-stream。
/<Crc32>文件内容的 crc32 校验值,不指定则不进行校验。
Host
upload.qiniup.com(华东区域加速上传域名) ,不同区域的http 和 https 域名详见不同存储区域对应的上传域名

返回包:

200 OK {

hash: <ETag>

}


2、JavaScript 代码

function putb64(){

var pic = "填写你的base64后的字符串";

var url = "http://upload.qiniup.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名

var xhr = new XMLHttpRequest();

xhr.onreadystatechange=function(){

if (xhr.readyState==4){

document.getElementById("myDiv").innerHTML=xhr.responseText;

}

}

xhr.open("POST", url, true);

xhr.setRequestHeader("Content-Type", "application/octet-stream");

xhr.setRequestHeader("Authorization", "UpToken  填写你从服务端获取的上传token");

xhr.send(pic);

}


注意事项:

  • upload.qiniup.com 上传域名适用于华东空间。华北空间使用 upload-z1.qiniu.com,华南空间使用 upload-z2.qiniu.com,北美空间使用 upload-na0.qiniu.com。

  • var url = "http://upload.qiniup.com/putb64/20264";这里的 20264 是图片没经过 base64 处理的原图字节大小。

  • xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token");这里的 UpToken 与后面的字符串保留一个空格。后面跟上服务端请求的 token 字符串。

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

  • var url = "http://upload.qiniup.com/putb64/20264";中可以扩展为以下方式:http://upload.qiniup.com/putb64/Fsize/key/EncodedKey/mimeType/EncodedMimeType/x:user-var/EncodedUserVarVal


上传后并指定自定义的 key:http://upload.qiniup.com/putb64/12345/key/usxxeigng

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
8375
獲贊與收藏
761

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消