摘要：，具體實現源碼上傳圖片獲取地址獲取創建對象，用于和服務器交換數據存儲函數，每當改變，便會調用該函數上傳成功最終終于實現了七牛云上傳的問題，如果還有問題的可以下方留言

最近公司內部項目遇到上傳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的問題，如果還有問題的可以下方留言....