業務開發情境之：文本框的base64編碼圖片粘貼直接上傳七牛

最近在作的一個聊天消息的功能。有個圖片上傳的功能，能夠經過按鈕上傳也能夠經過Ctrl+V上傳。按鈕上傳的咱們能夠經過七牛的API就能夠作了，咱們如今來講說Ctrl+V的實現是怎麼樣的。

涉及到的API

• FileReader()

• paste事件

關於imageFile，用來把文件讀入內存，而且讀取文件中的數據。提供一個異步的api，使用該api能夠在瀏覽器主線程中異步訪問文件系統，讀取文件中的數據。咱們的功能須要用到FileReader的接口事件onloadend(讀取完成，不管成功與否)，還有方法readAsDataURL(將文件讀取爲DataURL)。關於FileReader更多的事件和方法感興趣的同窗能夠本身去搜索，這裏就不深究了。

1.結構

咱們用的是textarea這個標籤，爲何不使用div呢，由於是還有@功能，爲了兼容兩種方案。

<textarea id="app"></textarea>
//獲取id
var textapp = document.getElementById('app');

2.綁定輸入框的paste事件

咱們這裏的思路是經過檢測粘貼的對象類型，若是是圖片的話就拿到圖片的base64位。而且在圖片被讀取完成的時候，咱們在去請求後臺拿到token。而且在拿到了token後咱們就去請求七牛的API。

textapp.addEventListener('paste', function(e){
    for (var i = 0; i < e.clipboardData.items.length; i++) {
        // 檢測是否爲圖片類型
        if (e.clipboardData.items[i].kind == "file" && /image\//.test(e.clipboardData.items[i].type)) {
            var imageFile = e.clipboardData.items[i].getAsFile();
            var fileReader = new FileReader();
            fileReader.onloadend = function(e) {
                //圖片的base64編碼
                console.log(e.target.result);
               
                //這裏設置獲取token的數據
                var thetoken = '';
                var head = {
                    "cmd": 0x4000C,
                    "uid": parseInt(EXTUID),
                    "ver": 1,
                    "sid": SID,
                    "apptype":1,
                    "entry_type": 2
                    }
                var rdata = {
                    "head":head
                    }
                rdata = JSON.stringify(rdata);
                //獲取後臺的給的token
                $.post(request_url_server,rdata,function(data,status){
                    if (status == "success") {
                        if (data['ret'] == 0){
                            var thetoken = data['token'];
                            pubt64(e.target.result.replace('data:image/png;base64,',''), imageFile, thetoken);
                        }
                    }
                });
            };
             //將文件讀取爲DataUrl
            fileReader.readAsDataURL(imageFile);
            e.preventDefault();
            break;
        }
    }
});

3.上傳事件

當xhr.readyState==4的時候說明咱們成功的把圖片傳上七牛了，而且七牛給咱們返回了一個json字符串。咱們把這個字符串轉化成json對象，裏面包含有圖片的key值，hash值，如今咱們就拿到了key把消息發送給服務端啦。

function pubt64(pic,imageFile,thetoken){
    //圖片的base64位
    var pic = pic;
    //imageFile.size爲圖片流的大小
    var url = "http://upload.qiniu.com/putb64/"+imageFile.size;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4){
          // 成功
          console.log(xhr.responseText);
          //轉換成json對象，包含key值，hash值。
          var dataImg = JSON.parse(xhr.responseText);
          //發送給服務端消息
          sendImg('paste', dataImg);
        }
    }
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", "UpToken "+thetoken);
    xhr.send(pic);
}