摘要：，具體實(shí)現(xiàn)源碼上傳圖片獲取地址獲取創(chuàng)建對(duì)象，用于和服務(wù)器交換數(shù)據(jù)存儲(chǔ)函數(shù)，每當(dāng)改變，便會(huì)調(diào)用該函數(shù)上傳成功最終終于實(shí)現(xiàn)了七牛云上傳的問(wèn)題，如果還有問(wèn)題的可以下方留言

最近公司內(nèi)部項(xiàng)目遇到上傳base64位圖片到七牛云，并且自定義key存儲(chǔ)，在解決過(guò)程遇到很多問(wèn)題，但是最終經(jīng)過(guò)請(qǐng)教，都得到結(jié)果，故在這里總結(jié)一下...

官方文檔

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，接下來(lái)是上傳過(guò)程需要注意的事情

上傳域名，具體查看七牛云官網(wǎng)。https://developer.qiniu.com/k...

url地址：http://upload-z2.qiniu.com/pu...
其中http://upload-z2.qiniu.com/pu...，F(xiàn)size為文件大小是必填項(xiàng)。獲取文件大小的時(shí)候，切 記要通過(guò)文件流的方式獲取。而不是通過(guò)圖片標(biāo)簽然后轉(zhuǎn)換后獲取。圖片沒(méi)經(jīng)過(guò) base64 處理的原圖字節(jié)大小。key值是非必填的，如果上傳需要指定一個(gè)標(biāo)識(shí)，則需要填寫。具體值通過(guò)服務(wù)端返回的mediaKey進(jìn)行轉(zhuǎn)換。因?yàn)楣痉?wù)端的mediaKey與上傳完成生成的hashCode值對(duì)應(yīng)不上，其中遇到比較大問(wèn)題，最后看到官網(wǎng)的源碼，服務(wù)端給到的mediaKey還需要進(jìn)行轉(zhuǎn)換成base64。

6，具體實(shí)現(xiàn)源碼

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);
      //創(chuàng)建XMLHttpRequest對(duì)象，用于和服務(wù)器交換數(shù)據(jù)
      var xhr = new XMLHttpRequest();
      //onreadystatechange: 存儲(chǔ)函數(shù)，每當(dāng)readystate改變，便會(huì)調(diào)用該函數(shù)
      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;
    }

最終終于實(shí)現(xiàn)了七牛云上傳base64的問(wèn)題，如果還有問(wèn)題的可以下方留言....