經常有朋友問起，如何在IM即時通訊中實現傳送圖片、視訊、語音和表情？

為此，小編特意寫了一個vue版本的Demo，實現了圖片視訊檔案和表情的的傳送，參考這個Demo原始碼，相信你就可以輕鬆的用Uniapp和小程式完成類似的功能。

一、圖片/視訊/語音傳送

對於語音、視訊和圖片的傳送，您如果有注意的話，在使用QQ或者微信的時候，當有朋友傳送圖片和視訊給您時，收到後，需要等一會兒才能顯示出來。就是因為在傳送的時候，只發送了檔案的路徑，您收到後，需要載入才能顯示出來。因為當前主流的IM包括微信，QQ等對於圖片和視訊的傳送，通常的做法都是：

• 上傳檔案到檔案伺服器
• 推送檔案路徑
• 收到檔案路徑
• 載入檔案

並不會通過網路直接傳送原始檔，因為對於大檔案的傳輸，會影響訊息的即時性。

對於檔案的上傳，您可以選擇直接上傳到您自己的伺服器，也可以選擇上傳到各種雲服務的物件儲存服務，也就是OSS上。

參考原始碼:

DemoService.prototype.sendFileMessage = function (type,content) {
  let uploadResult = restapi.uploadFile(content);
  let message = new Message(type,uploadResult.url);
  uploadResult.promise.then(() => {
    this.publish(message);
  },() => {
    var error = new Message(MessageType.TEXT,"檔案上傳失敗.");
    this.messages.unshift(error)
  });
  return uploadResult.promise;
};

雲服務的OSS具有更好的穩定性和高可用性，上傳的速度也有保證，另外也可以和CDN配合，所以我們建議用GoEasy配合OSS服務來實現圖片和視訊的傳送。

在本文的原始碼裡，選擇了使用阿里雲的OSS作為檔案上傳伺服器，您也可以切換為您自己實現的檔案上傳伺服器，或者選擇其他雲服務的OSS，原理都是一樣的。

二、傳送表情

表情的傳送也是非常簡單的，只是對於一些第一次實現表情傳送的同學來說，需要一個思路而已。

細心點的朋友，肯定有發現，當我們在QQ上聊天的時候，我們輸入一個反斜槓+“cy”， 就像這樣：/cy ，QQ就會立即顯示為一個呲牙的表情，就像下圖一樣：

哈哈哈，相信你已經心裡已經明白了十之八九了，對吧？

沒錯，表情在傳送的過程中其實就是發一個像“/cy”這樣定義好的的字串，在對方收到後“翻譯”成表情而已。

那為什麼不直接發圖片，而要進行這麼複雜的“翻譯”呢？

因為字串比圖片更小，傳送的速度更快，使用者體驗更好。一個系統中的使用者成千上萬，用字串可以節約大量的頻寬，節約系統資源。

原理講明白了，我們就開始幹活兒吧：

第一步、定義表情

定義一個key value的物件，key作為表情標籤，value則為每個表情標籤對應的圖片：

let expressions = {
  "[risus]": './images/risus.png',"[kiss]": './images/kiss.png',"[cry]": './images/cry.png',"[die]": './images/die.png',"[anger]": './images/anger.png',}

然後畫一個表情選擇的介面：

第二步、選擇表情

為每個圖片的onclick事件中傳入這個表情的字串標籤，當用戶點選的時候，將表情的標籤寫入輸入框，就成為了一個普通的字串。在傳送的時候，傳送的其實就是這個表情的標籤，也就是一個字串。

<div class="goeasy-expression">
      <div :class="[appearanceClass,'goeasy-appearance']" @click="show = true">{{text}}</div>
      <div class="expression-container" v-show="show">
        <div class="expression-icon-content">
          <div class="expression-icon__item"
             v-for="expression in list"
             :key="expression.id"
             @click="selectExpression(expression)">
            <img :src="expressions[expression.tag]">
          </div>

        </div>
        <div class="close-expression" @click="show = false"></div>
      </div>
    </div>

第三步、收到表情和展示表情

當對方收到一個字串後，跟第一步定義的key-value列表去匹配，如果能找到對應的表情，就在頁面上展示對應的表情圖片，如果找不到，就是一個普通的文字資訊。

原理講清楚了後，具體實現是不是很簡單了？

參考我們提供的Demo原始碼，相信你很快就能掌握實現方法。

Demo原始碼：https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo

總結

到此這篇關於IM聊天教程之傳送圖片/視訊/語音/表情的文章就介紹到這了,更多相關IM聊天傳送視訊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！