六五、JS-SDK 上传base64编码图片到七牛云

最新推荐文章于 2021-07-09 15:40:11 发布

夏河始溢

最新推荐文章于 2021-07-09 15:40:11 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zm06201118/article/details/80578927

JavaScript 专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何使用七牛云提供的接口上传Base64编码格式的图片，并提供了一个JavaScript上传示例代码。该接口支持指定文件大小、MIME类型等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景

七牛云上传功能基于 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==4){
        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上传文件到七牛