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

最新推荐文章于 2025-11-17 09:39:55 发布

转载最新推荐文章于 2025-11-17 09:39:55 发布 · 3.2k 阅读

文章标签：

#图片上传 #七牛 #key

上传图片到七牛云专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用七牛云的Base64接口上传文件，包括设置上传URL、配置HTTP请求头及发送Base64编码的文件内容。特别关注了文件大小的正确设置、UpToken的使用以及如何通过JavaScript实现文件的上传。

接口说明

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代码：

 
      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);
     
      }

注意事项：

var url = "http://upload.qiniu.com/putb64/20264"; 这里的20264是你的图片的没经过base64处理的原图的字节大小。
xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token"); 这里的UpToken与后面的字符串保留一个空格。后面跟上你在服务端请求的token的字符串。具体你通过什么样子的请求方式获得是客户自己要关心的事情。
获取文件大小的时候，切记要通过文件流的方式获取。而不是通过图片标签然后转换后获取。
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=