最近在用uniapp做app，中间涉及到了聊天功能，我在uni插件市场找到了集成tim腾讯即时通讯的模板：https://ext.dcloud.net.cn/plugin?id=1421

但作者没有实现上传图片消息的功能，自己搞了下，坑真多

首先，uniapp中选择图片用uni.chooseImage，返回：

返回一些blob的url，但是tim要求发图片必须使用dom对象或者File对象

这就只能把blob变成file对象了。

关于file对象的探索看这个：https://blog.csdn.net/lianzhang861/article/details/80283120

关于创建File对象，可以这样：

var file1=new File([blob], "aa.png",{type:"image/jpg"}); //第一个参数是Blob对象或者dataUrl，第二个参数是文件名，三个参数可选，规定文件类型

注意：第一个参数必须是对象，不能是转换成的字符串，比如uniapp或者微信小程序的chooseImage方法返回的blob的url，他是一个字符串，这样生成的File对象只是将url字符串变成文件了，不是文件本身！！！

想把blob字符串变成Blob对象，可以用es6的：const blob = await fetch(image.path).then(r => r.blob())

或者用传统的XHR或者ajax也行，就是把blob对象根据url给获取出来就行。

实例：

getImage(type){this.hideDrawer();uni.chooseImage({sourceType:[type],sizeType: ['original'/* , 'compressed' */], //可以指定是原图还是压缩图，默认二者都有success: (res)=>{console.log("!!!!!!!!!!!!!!!!!!!!")console.log(res)for(let i=0;i<res.tempFilePaths.length;i++){//res.name="aa.png"uni.getImageInfo({src: res.tempFilePaths[i],success: async  (image)=>{const blob = await fetch(image.path).then(r => r.blob())var file1=new File([blob], res.tempFiles[i].name,{type:blob.type});//file1.type="image/jpeg";let msg = {url:res.tempFilePaths[i],file:file1,w:image.width,h:image.height};this.sendMsg(msg,'img');}});}}});
},

// 发送消息
sendMsg(content,type){console.log(content)let messageif(type=="text"){message= this.tim.createTextMessage({to: this.toUserId,conversationType: 'C2C',payload: {text: content.text}});    }else if(type=="img"){message = this.tim.createImageMessage({to: this.toUserId,conversationType: 'C2C',// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,payload: {file: content.file},onProgress: function(event) { console.log('file uploading:', event) }});} this.$store.commit('pushCurrentMessageList', message)let pomise = this.tim.sendMessage(message)pomise.then(res=>{console.log(res)this.$nextTick(()=> {// 滚动到底this.scrollToView = res.data.message.ID});})
},

其实就是简单的blob转file而已，只不过从毫无头绪开始搞起，又看jdk源码都找资料的，一点点东西花了近两天的时间！！！

ps:

问题描述：

在uniapp h5版里面使用腾讯的即时通讯IM时，发现图片发送不了；

IM文档地址：TIM

查看 tim-js.js 源码发现，是由于uniapp内部封装有微信小程序的 wx 对象，导致 tim-js.js 即使在浏览器环境下也错误的判断成了小程序环境，导致上传插件 cos-js-sdk-v5 出现加载失败问题；

tim-js.js翻车地点：

上图红框内的判断导致变量 Oa（不一定是Oa,因为每次代码压缩混淆都会不一样）在h5环境下始终未true;可以通过搜索canIUse字符定位到这里；

解决办法：

将上图红框代码更改为下面代码即可：

Oa = "undefined" == typeof window && "undefined" != typeof wx && "function" == typeof wx.getSystemInfoSync && "function" == typeof wx.canIUse,

ps：

上次闹得只能用于h5端，因为uniapp用的是js的sdk，tim要求你上传file对象，但是在app中，无法将path转行成js中的file对象传给tim，这样的话只能换一个方式了。

解决办法：

使用自定义消息，官方文档：https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html?_ga=1.122530763.1188066772.1554011923#createCustomMessage

思路：将要发送的图片上传到自己的服务器或者oss啥的就行了，返回一个url，将url拼到自定义消息中即可

上传图片的步骤我就省略了，这里说的是上传后返回一个url，再创建：

message = this.tim.createCustomMessage({to: this.toUserId,conversationType: 'C2C',// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST// priority: TIM.TYPES.MSG_PRIORITY_HIGH,payload: {data: 'chatFile', // 用于标识该消息类型description: content, // 用于装载urlextension: ''}
});

这样返回message中就有了payload信息：

在消息队列中判断消息类型，把description赋值给img就完事

<view v-if="item.type=='TIMCustomElem'" class="bubble img" @tap="showPic(item.payload.description)"><image :src="item.payload.description" :style="{'width': 100+'px','height': 100+'px'}"></image></view>

至于其他类型的比如视频音频啥的，都可以使用这种方法，可以判断data的标识，也可以判断url的文件类型，区分不同的消息展示方式

uniapp对接腾讯即时通讯TIM 发图片消息问题相关推荐

用腾讯即时通讯IM和实时音视频实现完整语音通话功能
说来奇怪,即时通讯领域的霸主QQ,微信,旗下产品出的腾讯即时通讯IM就像个残疾人一样,这里不对那里不对,要达到生产级别,就不得不去改它很多源码才行.今天先不吐槽其他的,我们看看如何在腾讯Im里面完成语 ...
用腾讯即时通讯IM和实时音视频实现陪玩系统源码的语音通话功能
在陪玩系统源码中,用户之间主要的交流方式就是语音通话,实时互动性的语音通话能让人产生面对面交谈的感觉,所以在陪玩系统源码中,语音通话功能的开发非常重要,今天我们就一起来看看如何用腾讯即时通讯IM和实时 ...
uniapp对接腾讯云IM+音视频。音视频含UI集成
uniapp对接腾讯云IM+音视频文章目录 uniapp对接腾讯云IM+音视频前言一.准备工作二.使用步骤 1.App.vue配置 2.登录时操作 login.vue 3.使用方法一.音视频 ...
uniapp集成腾讯即时通信IM，实现一对一聊天，支持文字、表情、语音、图片、视频
uniapp集成腾讯即时通信IM,实现一对一聊天,支持文字.表情.语音.图片.视频原则拿来即用,节省开发时间介绍腾讯的给的例子内容比较乱,我花了好长时间才集成出来,然后对聊天页面做了UI美化. ...
【Android】腾讯即时通讯SDK的初次接入的详细记录
任务提出由于五月将至,需要返校毕业!要毕业了!大四狗!汪! 为了避免业务生疏,所以就想看看大厂家的IM是怎么构建的,阅读一哈源码. tx即时通讯官网任务记录下载其项目包,然后run一哈: 按照文 ...
腾讯---即时通讯im--在聊天消息打开文件的解决方案
即时通讯--腾讯im聊天消息中打开文件的解决办法前言一.如何解决打开文件? 二.使用步骤 1.引入腾讯im 2.腾讯im--文件处理类 3.腾讯im--文件处理方式方法一:新建activity+ ...
对接融云即时通讯组件SDK，轻松实现App聊天室
我好像特别喜欢做聊天室类的东东,刚折腾完微软的SignalR又折腾App.本来想研究研究XMPP的,由于服务器的搭建问题,先采用一个第三方的吧,看看效果如何.听到弟弟说他们公司用到了融云,我也下载个S ...
IM即时通讯-3-如何设计消息协议层方案
1. 前言上篇即时通讯系列-如何下手做技术方案设计最后总结出IM系统的端侧基本结构后续文章将从下到上以此做架构设计. 本文Agenda 什么是消息同步同步协议的常见设计方案包含哪些应该采用哪 ...
im即时通讯源码_IM消息ID技术专题(六)：深度解密滴滴的高性能ID生成器(Tinyid)
1.引言在中大型IM系统中,聊天消息的唯一ID生成策略是个很重要的技术点.不夸张的说,聊天消息ID贯穿了整个聊天生命周期的几乎每一个算法.逻辑和过程,ID生成策略的好坏有可能直接决定系统在某些技术点 ...

uniapp对接腾讯即时通讯TIM 发图片消息问题

ps:

问题描述：

解决办法：

ps：

解决办法：

uniapp对接腾讯即时通讯TIM 发图片消息问题相关推荐

最新文章

热门文章