如何上传base64编码图片到七牛云

时间：2021-01-04 15:24:47

接口说明

POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Crc32>/x:user-var/<EncodedUserVarVal>

Host: upload.qiniu.com

Authorization: UpToken <UpToken>

Content-Type: application/octet-stream

<Base64EncodedFileContent>

  • <Fsize>: 文件大小，必选。

  • <EncodedKey>: 可选，如果没有指定则：如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key，否则用 hash 值作 key。

  • <EncodedMimeType>: 文件的 MIME 类型。可选，默认是 application/octet-stream。

  • <Crc32>: 文件内容的 crc32 校验值。可选，不指定则不进行校验。

  • Host ：上传域名up.qiniu.com 用于服务端上传，upload.qiniu.com 用于客户端的上传

返回包：

200 OK {

  hash: <ETag>

}

通过javascript方式上传：

javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function putb64(){
  var pic = "填写你的base64后的字符串";
  var url = "http://upload.qiniu.com/putb64/20264";
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
      document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken  填写你从服务端获取的上传token");
  xhr.send(pic);
}

注意事项：

  1. var url = "http://upload.qiniu.com/putb64/20264"; 这里的20264是你的图片的没经过base64处理的原图的字节大小。

  2. xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token"); 这里的UpToken与后面的字符串保留一个空格。后面跟上你在服务端请求的token的字符串。具体你通过什么样子的请求方式获得是客户自己要关心的事情。

  3. 获取文件大小的时候，切记要通过文件流的方式获取。而不是通过图片标签然后转换后获取。

  4. var url = "http://upload.qiniu.com/putb64/20264"; 中可以扩展为以下方式：http://upload.qiniu.com/putb64/Fsize/key/EncodedKey/mimeType/EncodedMimeType/x:user-var/EncodedUserVarVal

  • Fsize: 文件大小，必选。支持传入 -1 表示文件大小以 http request body 为准。

  • EncodedKey: 可选，如果没有指定则：如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key，否则用 hash 值作 key。 .

  • 整个EncodedKey需要经过base64编码！！

  • 如：
  • var key = uuid();
    
key = base64encode(key);
    
var url = 'http://upload.qiniu.com/putb64/-1/key/'+key

  • 具体可以参照: http://developer.qiniu.com/docs/v6/api/overview/appendix.html#urlsafe-base64

  • EncodedMimeType: 文件的 MIME 类型。可选，默认是 application/octet-stream。

  • 举例：上传后并指定自定义的key： http://upload.qiniu.com/putb64/12345/key/usxxeigng=

相关文章