我们通常有一个这样的需求,我们想 直接将base64
编码的图片类型字符串传上去,然后通过预览地址直接可以预览为图片,参照官方的文档,JS 实现方式如下:
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);
}
但通常我们不是直接用 XMLHttpRequest
来上传,例如大家常用的 axios
, 大家上传通常转换需要注意以下几点:
1、 base64 字符串不是以
data:image/png;base64,
开头 需要截取后的字符串
2、上传域名需要注意是你们自己申请桶的地址,如果你上传报错官方接口会返回你真正的地址
下面将最终上传代码贴出来
axios.post('qiniuUrl', base64Data.split(';base64,')[1], {
headers: {
Authorization: `UpToken ${token}`,
'Content-Type': 'application/octet-stream',
},
})
.then(res => {}).catch(()=>{})
返回 数据格式
{hash: 'Fg_SHS142slWviBsJiEPAjQyApr', key: 'Fg_SHS14slWvi2BsJiEPAjQyApr'}
只需要拿上预览地址拼接 key ,例如 https://upload.qiniup.com/Fg_SHS142slWviBsJiEPAjQyApr?imageView2/1/w/300/h/200
需要注意 https://upload.qiniup.com
是你自己申请的预览地址,后面参数拼接的地址可以指定宽高,具体可以参考
大家上传会遇到这样的错fsize is not equal to recevied size
把地址改为 http://up.qiniu.com/putb64/-1
即可。注意域名要是你自己桶的地址。