六五、JS-SDK 上傳base64編碼圖檔到七牛雲

使用場景

• 七牛雲上傳功能基于 H5 File API，當使用H5 input Type=”file” 上傳圖檔預設轉為base64編碼格式的圖檔，正常上傳到七牛雲傳回的hash，背景拿到的是一個無法識别的檔案，而七牛提供了針對base64編碼格式的圖檔上傳。

一、接口說明

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
           

參數名稱	是否必填	說明
Fsize	是	檔案大小。支援傳入 -1 表示檔案大小以 http request body 為準。
EncodedKey	否	如果 uptoken.SaveKey 存在則基于 SaveKey 生産 key，否則用 hash 值作 key。EncodedKey 需要經過 base64 編碼。
EncodedMimeType	否	檔案的 MIME 類型，預設是 application/octet-stream。
Crc32	否	檔案内容的 crc32 校驗值，不指定則不進行校驗。
Host	否	upload.qiniup.com(華東區域加速上傳域名) ，不同區域的http 和 https 域名詳見不同存儲區域對應的上傳域名

二、JavaScript上傳demo

putb64(imgSource){
    window.Qapp.showLoad({content:'上傳圖檔中！'}) //loading
    const { uptoken } = this.state  //上傳驗證資訊，前端通過接口請求後端獲得
    const pic = imgSource.replace('data:image/jpeg;base64,' ,'') //base64後的字元串
    const url = "http://upload.qiniup.com/putb64/-1"; //非華東空間需要根據注意事項
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange=()=>{
      if (xhr.readyState==){
        window.Qapp.hideLoad()
        const dataInfo = JSON.parse(xhr.response) //将傳回的字元串轉化為JSON對象
        console.log(dataInfo)
        const { reportImg } = this.state
        reportImg.push(dataInfo.hash)
        this.setState({reportImg})
        this._submitReportInfo(reportImg)
      }
    }

    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", `UpToken ${uptoken}`);
    xhr.send(pic);
}
           

tip

• upload.qiniup.com 上傳域名适用于華東空間。華北空間使用 upload-z1.qiniu.com，華南空間使用 upload-z2.qiniu.com，北美空間使用 upload-na0.qiniu.com。
• xhr.setRequestHeader(“Authorization”, “UpToken 填寫你從服務端擷取的上傳token”);

  這裡的 UpToken 與後面的字元串保留一個空格。

  後面跟上服務端請求的 token 字元串。
• 擷取檔案大小的時候，切記要通過檔案流的方式擷取。而不是通過圖檔标簽然後轉換後擷取。
• let url = “http://upload.qiniup.com/putb64/20264“;中可以擴充為以下方式：http://upload.qiniup.com/putb64/Fsize/key/EncodedKey/mimeType/EncodedMimeType/x:user-var/EncodedUserVarVal。

• 六四、使用JS-SDK上傳檔案到七牛