近来公司内部项目碰到上传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的题目，假如另有题目的能够下方留言….