七牛云上传截图后的base64位遇到的问题总结

摘要：，具体实现源码上传图片获取地址获取创建对象，用于和服务器交换数据存储函数，每当改变，便会调用该函数上传成功最终终于实现了七牛云上传的问题，如果还有问题的可以下方留言

最近公司内部项目遇到上传base64位图片到七牛云，并且自定义key存储，在解决过程遇到很多问题，但是最终经过请教，都得到结果，故在这里总结一下...

官方文档

1，布局代码如下：

    
    

      

        
      
      确定
    

    

        

          

          
        
        

          
          
        
    
  

2，引入截图插件cropperjs

import Cropper from "cropperjs"

3，初始化裁切框

var self = this;
var image = document.getElementById("image");
this.cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  background:false,
  zoomable:false,
  ready: function () {
    self.croppable = true;
  }
});

4，changge，裁切代码忽略，具体参考cropperjs的封装

5，接下来是上传过程需要注意的事情

上传域名，具体查看七牛云官网。https://developer.qiniu.com/k...

url地址：http://upload-z2.qiniu.com/pu...
其中http://upload-z2.qiniu.com/pu...，Fsize为文件大小是必填项。获取文件大小的时候，切 记要通过文件流的方式获取。而不是通过图片标签然后转换后获取。图片没经过 base64 处理的原图字节大小。key值是非必填的，如果上传需要指定一个标识，则需要填写。具体值通过服务端返回的mediaKey进行转换。因为公司服务端的mediaKey与上传完成生成的hashCode值对应不上，其中遇到比较大问题，最后看到官网的源码，服务端给到的mediaKey还需要进行转换成base64。

6，具体实现源码

uploadImg () {//上传图片
  this.$http.get("获取token地址").then(res => {
    if(res.data.code === 1){//获取token
      this.putb64(res.data.data.token,res.data.data.mediaKey,this.headerImage);
    }
  })
}   
putb64(token, key, imageBase64){
      let pic = imageBase64.replace(/^.*?,/, "");
      let size = this.fileSize(pic);
      let url = "http://upload-z2.qiniu.com/putb64/"+size+"/key/"+this.baseCode64(key);
      //创建XMLHttpRequest对象，用于和服务器交换数据
      var xhr = new XMLHttpRequest();
      //onreadystatechange: 存储函数，每当readystate改变，便会调用该函数
      xhr.onreadystatechange = function(){
         if (xhr.readyState == 4){
           if(xhr.status === 200){
             alert("上传成功...")
           }
         }
      }
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/octet-stream");
      xhr.setRequestHeader("Authorization", "UpToken " + token);
      xhr.send(pic);
},
baseCode64(input){
  var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var output = "";
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;
  input = this._utf8_encode(input);
  while (i < input.length) {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);
      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;
      if (isNaN(chr2)) {
          enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
          enc4 = 64;
      }
      output = output +
      _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
      _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
  }
  return output;
},
_utf8_encode(string) {
        string = string.replace(/
/g,"
");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            } else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            } else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }
      return utftext;
    }

最终终于实现了七牛云上传base64的问题，如果还有问题的可以下方留言....