上传base64编码图片到七牛云

我们通常有一个这样的需求，我们想 直接将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 即可。注意域名要是你自己桶的地址。