javascript方式上传图片到七牛

发表于 | Edited on | 分类于 | Comments： | Views：
javascript方式上传图片到七牛

【前言】

觉得前面内容复杂（官方文档就是这样)可以跳过，从demo看起，

接口说明

1
2
3
4
5
6
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> （必填) 文件大小。支持传入 -1 表示文件大小以 http request body 为准。
/<EncodedKey> 如果没有指定则：如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key，否则用 hash 值作 key。EncodedKey 需要经过 base64 编码。具体可以参照：URL 安全的 Base64 编码。
/<EncodedMimeType> 文件的 MIME 类型，默认是 application/octet-stream。
/<Crc32> 文件内容的 crc32 校验值，不指定则不进行校验。
Host upload.qiniu.com(华东区域加速上传域名) ，不同区域的http 和 https 域名详见不同存储区域对应的上传域名

Demo(其实重要的就这几段！)

  • 官方demo[ES5]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function putb64(pic,token){
      var pic = "填写你的base64后的字符串";
      var url = "http://upload.qiniu.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        if (xhr.readyState==4){
            console.log('七牛图片名',xhr.responseText)
        }
      }
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/octet-stream");
      xhr.setRequestHeader("Authorization", "UpToken  填写你从服务端获取的上传token");
      xhr.send(pic);
    }

  • 优化demo[es6]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    const uploadBase64 = (base64, token) => {
        return new Promise((resolve) => {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    const {key, error} = JSON.parse(xhr.responseText);
                    if (key) {
                        resolve('http://自己的七牛图片库域名' + key);
                    }
                    if (error) {
                        resolve({error});
                    }
                }
            };
            xhr.open('POST', http://upload.qiniu.com, true);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.setRequestHeader('Authorization', 'UpToken ' + token);
            xhr.send(base64);
        });
    };

  • 扩展demo[es6]
    基于上个demo是传入单个base字符串，这里传入base64数组

    1
    2
    3
    const uploadBase64List = (list, token) => Promise.all(
            list.map(base64 => uploadBase64(base64, token))
          );

注意事项：

  • pic 把要上传的图片先转换为base64字符串，(从微信获取的base64ios是带有data:image/jgp;base64,前缀需去掉)；
  • var url = "http://upload.qiniu.com/putb64/20264";这里的 20264 是图片没经过 base64 处理的原图字节大小。如果不清楚大小就传-1；
  • key就是文件名，如果不填就返回hash值做为文件名；
  • xhr.setRequestHeader("Authorization", "UpToken(空格)token");这里的UpToken与后面的字符串保留一个空格。后面跟上服务端给出的上传token字符串；
  • upload.qiniu.com 上传域名适用于华东空间。华北空间使用 upload-z1.qiniu.com，华南空间使用 upload-z2.qiniu.com，北美空间使用 upload-na0.qiniu.com。

相关文献