经常有朋友问如何在IM即时通讯中发送图片、视频、语音、表情？为此，小编专门写了一个Vue版的Demo，实现了图片、视频文件和表情包的发送。参考这个Demo的源码，相信你可以很方便的使用Uniapp和小程序来完成类似的功能。本文全套Demo源码已开源在码云上，供大家克隆或下载：https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo1.图片/视频/语音发送语音、视频、图片大家注意，在使用QQ或者微信的时候，朋友给你发来的图片、视频，收到后要过一段时间才能显示出来。因为发送的时候只发送了文件的路径，收到后需要加载才能显示。因为目前主流的IM包括微信、QQ等发送图片和视频，通常的做法是：上传文件到文件服务器推送文件路径，接收文件路径加载文件，而不是直接传输源文件通过网络，因为对于大文件的传输会影响消息的即时性。文件上传可以选择直接上传到自己的服务器，也可以选择上传到各种云服务的对象存储服务，即OSS。参考源码：DemoService.prototype.sendFileMessage=function(type,content){letuploadResult=restapi.uploadFile(content);letmessage=newMessage(type,uploadResult.url);uploadResult.promise.then(()=>{this.publish(message);},()=>{varerror=newMessage(MessageType.TEXT,"文件上传失败。");this.messages.unshift(error)});返回uploadResult.promise;};云服务OSS稳定性和高可用更好，上传速度也有保障。另外还可以配合CDN，所以推荐使用GoEasy配合OSS服务实现图片和视频的发送。本文源码选择阿里云OSS作为文件上传服务器。也可以切换到自己的文件上传服务器，或者选择其他云服务的OSS。原理是一样的。2.发送表情发送表情也很简单，但是对于一些第一次实现发送表情的同学来说，需要一个思路。细心的朋友，你一定注意到了，我们在QQ聊天的时候，输入一个反斜杠+“cy”，像这样：/cy，QQ马上会显示一张裸脸，就像下图一样：哈哈哈，我相信十之八九你心里已经明白了吧？没错，在发送表情的过程中，其实就是发送一个定义好的字符串，比如“/cy”，对方收到后，“翻译”成表情。那为什么不直接发图片，还要搞这么复杂的“翻译”呢？因为字符串比图片小，所以发送速度更快，用户体验更好。一个系统有几万个用户，使用字符串可以节省大量的带宽和系统资源。原理清楚了，下面开始工作：第一步，定义表达式定义一个键值对象，键作为表达式标签，值是每个表达式标签对应的图片：letexpressions={"[risus]":'./images/risus.png',"[kiss]":'./images/kiss.png',"[cry]":'./images/cry.png',"[die]":'./images/die.png',"[anger]":'./images/anger.png',}然后画一个选择表情的界面：第二步选择一个表情传入每个图片的onclick事件输入这个表情的字符串标签，当用户点击时，将表情的标签写入输入框，就变成了一个普通的字符串。发送的时候，发送的其实是表情的标签，是一个字符串。
