業(yè)務(wù)開發(fā)情境之：文本框的base64編碼圖片粘貼直接上傳七牛

xiao7cn 發(fā)布于2019-08-22 10:33 / 2094人閱讀

摘要：我們的功能需要用到的接口事件讀取完成，無(wú)論成功與否，還有方法將文件讀取為。檢測(cè)是否為圖片類型圖片的編碼這里設(shè)置獲取的數(shù)據(jù)獲取后臺(tái)的給的將文件讀取為上傳事件當(dāng)?shù)臅r(shí)候說(shuō)明我們成功的把圖片傳上七牛了，并且七牛給我們返回了一個(gè)字符串。

最近在做的一個(gè)聊天消息的功能。有個(gè)圖片上傳的功能，可以通過(guò)按鈕上傳也可以通過(guò)Ctrl+V上傳。按鈕上傳的我們可以通過(guò)七牛的API就可以做了，我們現(xiàn)在來(lái)說(shuō)說(shuō)Ctrl+V的實(shí)現(xiàn)是怎么樣的。

涉及到的API

FileReader()

paste事件

關(guān)于imageFile，用來(lái)把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。提供一個(gè)異步的api，使用該api可以在瀏覽器主線程中異步訪問(wèn)文件系統(tǒng)，讀取文件中的數(shù)據(jù)。我們的功能需要用到FileReader的接口事件onloadend(讀取完成，無(wú)論成功與否)，還有方法readAsDataURL(將文件讀取為DataURL)。關(guān)于FileReader更多的事件和方法感興趣的同學(xué)可以自己去搜索，這里就不深究了。

1.結(jié)構(gòu)

我們用的是textarea這個(gè)標(biāo)簽，為什么不使用div呢，因?yàn)槭沁€有@功能，為了兼容兩種方案。


//獲取id
var textapp = document.getElementById("app");

2.綁定輸入框的paste事件

我們這里的思路是通過(guò)檢測(cè)粘貼的對(duì)象類型，如果是圖片的話就拿到圖片的base64位。并且在圖片被讀取完成的時(shí)候，我們?cè)谌フ?qǐng)求后臺(tái)拿到token。并且在拿到了token后我們就去請(qǐng)求七牛的API。

textapp.addEventListener("paste", function(e){
    for (var i = 0; i < e.clipboardData.items.length; i++) {
        // 檢測(cè)是否為圖片類型
        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);
               
                //這里設(shè)置獲取token的數(shù)據(jù)
                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);
                //獲取后臺(tái)的給的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.上傳事件

當(dāng)xhr.readyState==4的時(shí)候說(shuō)明我們成功的把圖片傳上七牛了，并且七牛給我們返回了一個(gè)json字符串。我們把這個(gè)字符串轉(zhuǎn)化成json對(duì)象，里面包含有圖片的key值，hash值，現(xiàn)在我們就拿到了key把消息發(fā)送給服務(wù)端啦。

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);
          //轉(zhuǎn)換成json對(duì)象，包含key值，hash值。
          var dataImg = JSON.parse(xhr.responseText);
          //發(fā)送給服務(wù)端消息
          sendImg("paste", dataImg);
        }
    }
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", "UpToken "+thetoken);
    xhr.send(pic);
}