使用场景
- 七牛云上传功能基于 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”);
后面跟上服务端请求的 token 字符串。这里的 UpToken 与后面的字符串保留一个空格。
- 获取文件大小的时候,切记要通过文件流的方式获取。而不是通过图片标签然后转换后获取。
- let url = “http://upload.qiniup.com/putb64/20264“;中可以扩展为以下方式:http://upload.qiniup.com/putb64/Fsize/key/EncodedKey/mimeType/EncodedMimeType/x:user-var/EncodedUserVarVal。
- 六四、使用JS-SDK上传文件到七牛