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

xiao7cn 發布于2019-08-22 10:33 / 2106人閱讀

摘要：我們的功能需要用到的接口事件讀取完成，無論成功與否，還有方法將文件讀取為。檢測是否為圖片類型圖片的編碼這里設置獲取的數據獲取后臺的給的將文件讀取為上傳事件當的時候說明我們成功的把圖片傳上七牛了，并且七牛給我們返回了一個字符串。

最近在做的一個聊天消息的功能。有個圖片上傳的功能，可以通過按鈕上傳也可以通過Ctrl+V上傳。按鈕上傳的我們可以通過七牛的API就可以做了，我們現在來說說Ctrl+V的實現是怎么樣的。

涉及到的API

FileReader()

paste事件

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

1.結構

我們用的是textarea這個標簽，為什么不使用div呢，因為是還有@功能，為了兼容兩種方案。


//獲取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);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90818.html

Web聊天工具的富文本輸入框

摘要：由于我們的富文本輸入框比較簡單，所以只需要處理兩類數據即可，其一是普通的文本類型數據，包括表情其二則是圖片類型數據。最近折騰 Websocket，打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ，粘貼圖片的富文本輸入框其實蘊含著許多有趣的知識，于是便打算記錄下來和大家分享。倉庫地址：chat-input-box預覽地址：https://codepen.io...

iKcamp 2019-08-23 15:36 評論0 收藏0
基于 Github API 的圖床 Chrome 插件開發全紀錄

摘要：最近基于開發了一款圖床插件，現在已經開源并上架應用商店。通過方法把轉成，然后放在里測試一下看來效果是的，接下來就是對圖床插件進行開發的步驟了。至此，整個插件的開發發布流程就已經完成了。 showImg(https://user-images.githubusercontent.com/12172868/57382983-8f29b900-71e0-11e9-8fe9-c0f12fd54...

DoINsiSt 2019-08-26 13:43 評論0 收藏0
使用七牛云存儲的一些經驗總結

摘要：原文使用七牛云存儲的一些經驗總結錯誤處理如果在與七牛的交互中出現狀態碼為的錯誤，一句話，不要猶豫，直接聯系七牛技術支持。但是筆者發現，在使用七牛云轉化后的視頻，這樣做是無效的。近段時間將使用七牛云存儲來存放用戶上傳的數據，客戶端通過七牛的js-sdk與七牛交互，服務端C#實現了七牛相關的接口。在這過程中多多少少遇到點問題，在這里總結一下。原文：使用七牛云存儲的一些經驗總結 599錯...

Lyux 2019-08-21 12:23 評論0 收藏0
js實現圖片粘貼上傳到服務器并展示

摘要：如果有錯誤，，可通過下文中的監聽函數拿到該錯誤碼進行自定義處理是一個數組，返回若干圖片的線上地址圖片地址圖片地址參考部分最近看了一些有關于js實現圖片粘貼上傳的demo,實現如下: (這里只能檢測到截圖粘貼和圖片右鍵復制之后粘貼) demo1: document.addEventListener(paste, function (event) { consol...

imingyu 2019-08-21 17:30 評論0 收藏0