uniapp h5版解决TIM不能发送图片的问题

问题描述：

在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,

不知道 && 用法的可以上这位老哥的车   ====》》》   我是老哥(✪ω✪)

 

cos-js-sdk-v5插件安装方法：

-----通过

npm i cos-js-sdk-v5 --save

安装 SDK 依赖；

如果uniapp项目没有package.json，可以自行在终端初始化一下项目即可，如下：

》选中项目后，点击左下角终端图标：

》就会自动弹出内置终端窗口：

》输入命令： npm init

》一直回车，最后键入yes,就会自动生成一个package.json

 在项目页面导入插件  》》 官方文档

// HTML5 环境
import COS from 'cos-js-sdk-v5';
tim.registerPlugin({'cos-js-sdk': COS}); // 在 login 前调用，以支持文件上传腾讯云对象存储
tim.login({userID: 'your userID', userSig: 'your userSig'});

发送图片示例： 》》官方文档 

// Web 端发送图片消息
// 1. 创建消息实例，接口返回的实例可以上屏
let message = tim.createImageMessage({
  to: 'user1',
  conversationType: TIM.TYPES.CONV_C2C,
  payload: {
    file: document.getElementById('imagePicker'),
  },
  onProgress: function(event) { console.log('file uploading:', event) }
});
// 2. 发送消息
let promise = tim.sendMessage(message);
promise.then(function(imResponse) {
  // 发送成功
  console.log(imResponse);
}).catch(function(imError) {
  // 发送失败
  console.warn('sendMessage error:', imError);
});

这里的注意事项：

payload.file的值为input标签本身，而由于uniapp将input标签重新封装，所以input标签不能直接使用，需要自己手动生成一个input标签；

我这里简单的做成了一个自定义组件：

<style lang="scss">
	.u-input {
		position: relative;
		display: inline-block;
	}
</style>

<template>
	<view class="u-input" :id="u_id">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				u_id: `u${Math.random().toString(36).substr(2,8)}`
			};
		},
		props:{
			id:{
				type: String
			},
			accept: {
				type: String
			},
			type: {
				type: String
			},
			multiple: {
				type: String
			}
		},
		mounted() {
			let that = this;
			this.$nextTick(() => {
				let {accept,type,multiple, id} = this;
				let _box = document.querySelector(`#${this.u_id}`);
				let _input = document.createElement('input');
				_input.setAttribute('type',type);
				_input.setAttribute('id',id);
				_input.setAttribute('accept',accept);
				_input.style['opacity'] = '0';
				_input.style['width'] = '100%';
				_input.style['height'] = '100%';
				_input.style['position'] = 'absolute';
				_input.style['top'] = '0';
				_input.style['left'] = '0';
				if(multiple == "multiple") _input.setAttribute('multiple',multiple);
				_input.addEventListener('change',e => {
					that.$emit('ichange',e.target.file);
				})
				_box.appendChild(_input);
			})
		},
		methods: {
			
		}
	};
</script>

<uInput :id="'photoPicker'" :type="'file'" :accept="'image/png,image/jpeg'" @ichange="sendImageMsg">
	<image src="/static/photo.png"></image>
	<view>拍照</view>
</uInput>

//发送图片
			sendImageMsg(e){
				let that = this;
				let message = tim.createImageMessage({
				  to: that.groupId,
				  conversationType: TIM.TYPES.CONV_GROUP,
				  payload: {
				    file: document.getElementById('photoPicker')
				  },
				  onProgress: function(event) { console.log('file uploading:', event) }
				});
				
				// 2. 发送消息
				let promise = tim.sendMessage(message);
				promise.then(function(imResponse) {
				  // 发送成功
				  console.log(imResponse);
                  document.getElementById('photoPicker').value = '';//重置input标签
				}).catch(function(imError) {
				  // 发送失败
				  console.warn('sendMessage error:', imError);
                  document.getElementById('photoPicker').value = '';//重置input标签
				});
			},

 

后记： 

关于tim，可以自己去官网查看；

官网   api文档