美文网首页
前端h5将base64上传到七牛云

前端h5将base64上传到七牛云

作者: leesession | 来源:发表于2018-04-12 11:20 被阅读0次

    1.将base64上传到七牛云之前,首先需要 后台生成一个 token。
    2.用一个方法将代码封装起来

      putb64(picBase,token) {
            /*picBase为 base64 , token由后台传入*/
            let _this=this;
            /*把头部的data:image/png;base64,去掉。(注意:base64后面的逗号也去掉)*/
            let arr = picBase.split(','),
              mime = arr[0].match(/:(.*?);/)[1],
              len = mime.length;
            let subLen = parseInt(len + 13);
            picBase=picBase.substring(subLen);
            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str) {
              let fileSize;
              if (str.indexOf('=') > 0) {
                let indexOf = str.indexOf('=');
                str = str.substring(0, indexOf);//把末尾的’=‘号去掉
              }
              fileSize = parseInt(str.length - (str.length / 8) * 2);
              return fileSize;
            }
            /*把字符串转换成json*/
            function strToJson(str) {
              let json = eval('(' + str + ')');
              return json;
            }
            let url = "http://upload-z2.qiniu.com/putb64/" + fileSize(picBase);
    //此处需要注意,不同的区域配置 (http://upload-z2.qiniu.com)会不同,我的链接为华南的链接
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange  = function () {
              if (xhr.readyState == 4) {
                let keyText = xhr.responseText;
                /*返回的key是字符串,需要装换成json*/
                keyText = strToJson(keyText);
                /* http://p5kgkqzx0.bkt.clouddn.com/是我的七牛云空间网址,keyText.key 是返回的图片文件名*/
                _this.upImg = "http://p5kgkqzx0.bkt.clouddn.com/" + keyText.key;
              }
            };
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            //此处注意: UpToken 之后有一个空格
            xhr.setRequestHeader("Authorization", "UpToken "+token);
            xhr.send(picBase);
    
          },
    

    相关文章

      网友评论

          本文标题:前端h5将base64上传到七牛云

          本文链接:https://www.haomeiwen.com/subject/btdxkftx.html