前端h5将base64上传到七牛云

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上传到七牛云)