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

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

官方文档

1，布局代码如下：

<div class="avatar-box">
    <!-- 遮罩层 -->
    <div class="container" v-show="panel">
      <div>
        <img id="image" :src="url" alt="Picture">
      </div>
      <button type="button" id="button" @click="crop">确定</button>
    </div>

    <div style="padding:20px;">
        <div class="show">
          <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
          </div>
        </div>
        <div style="margin-top:20px;">
          <input type="file" id="change" aaccept="image/png,image/jpeg" @change="change">
          <label for="change"></label>
        </div>
    </div>
  </div>

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(/\r\n/g,"\n");
        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的问题，如果还有问题的可以下方留言....