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

た入场券 2023-07-20 08:12 18阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1][]

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

关于file对象的探索看这个：[https://blog.csdn.net/lianzhang861/article/details/80283120][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 message
    	if(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*翻车地点：***

![6d742d51c31f972354a1d0040ec58e5d.png][]

上图红框内的判断导致变量 **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][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, // 用于装载url
    	extension: ''
      }
    });

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 3][]

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

[https_ext.dcloud.net.cn_plugin_id_1421]: https://ext.dcloud.net.cn/plugin?id=1421
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70]: /images/20230528/9d0913201cdc4b20969c1512d8d3a87c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/a7aecebb623f41bfaf9e976894a06700.png
[https_blog.csdn.net_lianzhang861_article_details_80283120]: https://blog.csdn.net/lianzhang861/article/details/80283120
[TIM]: https://cloud.tencent.com/document/product/269/37411
[6d742d51c31f972354a1d0040ec58e5d.png]: /images/20230528/02c91b67a58a47198520525350143826.png
[https_imsdk-1252463788.file.myqcloud.com_IM_DOC_Web_SDK.html_ga_1.122530763.1188066772.1554011923_createCustomMessage]: https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html?_ga=1.122530763.1188066772.1554011923#createCustomMessage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/28c1a196dc75403a92ae96419f85febf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/1eccc7f03922447a9442573430cf2147.png