IM 项目,聊天输入框不能上传图片,使用个什么方式实现?
你好,可以自己写一个上传图片的控件,后接入SDK的相关接口。根据IM文档,在web中创建图片消息,可以使用图片消息接口:tim.createImageMessage(options)
相关文档地址:https://cloud.tencent.com/document/product/269/37448
参数options
为Object
类型,包含的属性值如下表所示:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
to | String | - | - | 消息的接收方 |
conversationType | String | - | - | 会话类型,取值TIM.TYPES.CONV_C2C或TIM.TYPES.CONV_GROUP |
priority | String | <optional> | TIM.TYPES.MSG_PRIORITY_NORMAL | 消息优先级 |
payload | Object | - | - | 消息内容的容器 |
onProgress | function | - | - | 获取上传进度的回调函数 |
下面时是文档提供的一个简单的web端的demo:
// Web 端发送图片消息示例1 - 传入 DOM 节点
// 1. 创建消息实例,接口返回的实例可以上屏
let message = tim.createImageMessage({
to: 'user1',
conversationType: TIM.TYPES.CONV_C2C,
// 消息优先级,用于群聊(v2.4.2起支持)。如果某个群的消息超过了频率限制,后台会优先下发高优先级的消息,详细请参考 消息优先级与频率控制
// 支持的枚举值: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: 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);
});
// Web 端发送图片消息示例2- 传入 File 对象
// 先在页面上添加一个 ID 为 "testPasteInput" 的消息输入框,例如 <input type="text" id="testPasteInput" placeholder="截图后粘贴到输入框中" size="30" />
document.getElementById('testPasteInput').addEventListener('paste', function(e) {
let clipboardData = e.clipboardData;
let file;
let fileCopy;
if (clipboardData && clipboardData.files && clipboardData.files.length > 0) {
file = clipboardData.files[0];
// 图片消息发送成功后,file 指向的内容可能被浏览器清空,如果接入侧有额外的渲染需求,可以提前复制一份数据
fileCopy = file.slice();
}
if (typeof file === 'undefined') {
console.warn('file 是 undefined,请检查代码或浏览器兼容性!');
return;
}
// 1. 创建消息实例,接口返回的实例可以上屏
let message = tim.createImageMessage({
to: 'user1',
conversationType: TIM.TYPES.CONV_C2C,
payload: {
file: file
},
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);
});
});