天天看点

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

继续阅读