上傳base64編碼圖片到七牛云

我們通常有一個(gè)這樣的需求，我們想 直接將base64 編碼的圖片類型字符串傳上去，然后通過預(yù)覽地址直接可以預(yù)覽為圖片，參照官方的文檔，JS 實(shí)現(xiàn)方式如下：

function putb64(){
  var pic = "填寫你的base64后的字符串";
  var url = "http://upload.qiniup.com/putb64/20264"; //非華東空間需要根據(jù)注意事項(xiàng) 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 填寫你從服務(wù)端獲取的上傳token");
  xhr.send(pic);
}

但通常我們不是直接用 XMLHttpRequest 來上傳，例如大家常用的 axios, 大家上傳通常轉(zhuǎn)換需要注意以下幾點(diǎn)：

1、 base64 字符串不是以 data:image/png;base64, 開頭 需要截取后的字符串

2、上傳域名需要注意是你們自己申請(qǐng)桶的地址，如果你上傳報(bào)錯(cuò)官方接口會(huì)返回你真正的地址

下面將最終上傳代碼貼出來

    axios.post('qiniuUrl', base64Data.split(';base64,')[1], {
                headers: {
                  Authorization: `UpToken ${token}`,
                  'Content-Type': 'application/octet-stream',
                },
              })
              .then(res => {}).catch(()=>{})

返回 數(shù)據(jù)格式

{hash: 'Fg_SHS142slWviBsJiEPAjQyApr', key: 'Fg_SHS14slWvi2BsJiEPAjQyApr'}

只需要拿上預(yù)覽地址拼接 key ，例如 https://upload.qiniup.com/Fg_SHS142slWviBsJiEPAjQyApr?imageView2/1/w/300/h/200

需要注意 https://upload.qiniup.com 是你自己申請(qǐng)的預(yù)覽地址，后面參數(shù)拼接的地址可以指定寬高，具體可以參考

官方文檔

大家上傳會(huì)遇到這樣的錯(cuò)fsize is not equal to recevied size 把地址改為 http://up.qiniu.com/putb64/-1 即可。注意域名要是你自己桶的地址。