六五、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上传文件到七牛