Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >web端IM 聊天的输入框,能同时支持图片和文字发送吗?是怎么实现的??IM的demo不能上传图片?

web端IM 聊天的输入框,能同时支持图片和文字发送吗?是怎么实现的??IM的demo不能上传图片?

提问于 2020-08-24 07:45:25
回答 1关注 0查看 912

IM 项目,聊天输入框不能上传图片,使用个什么方式实现?

回答 1

EatRice

精选回答

发布于 2020-08-24 13:58:29

你好,可以自己写一个上传图片的控件,后接入SDK的相关接口。根据IM文档,在web中创建图片消息,可以使用图片消息接口:tim.createImageMessage(options)

相关文档地址:https://cloud.tencent.com/document/product/269/37448

参数optionsObject类型,包含的属性值如下表所示:

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:

代码语言:js
AI代码解释
复制
// 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);
  });
});
和开发者交流更多问题细节吧,去 写回答
相关文章
IM聊天教程:发送图片/视频/语音/表情
为此,小编特意写了一个vue版本的Demo,实现了图片视频文件和表情的的发送,参考这个Demo源代码,相信你就可以轻松的用Uniapp和小程序完成类似的功能。
GoEasy消息推送
2020/05/19
5.7K0
IM聊天教程:发送图片/视频/语音/表情
IM web Demo邀请端挂断报错问题规避
当前从官网下载的IM web端Demo发出邀请然后挂断的话会报如下图这个错误,从而导致挂断异常的情况,那么这个问题是怎么出现以及怎么规避呢?
良人
2022/01/29
5490
IM移动端怎么搜索本地聊天记录
比如要找内容包含某一个字符串的聊天记录,就是一条聊天记录一条聊天记录的看,对于每一条聊天记录,从头看到尾,如果聊天记录包含此字符串,则聊天记录为要找的条目,接着看下一跳记录,直到扫描完所有的聊天记录。数据量小时,这种方法直接、方便。但是对于大量的数据,这种方法效率很低。
普通程序员
2019/10/23
2.3K0
IM移动端怎么搜索本地聊天记录
图片的文字怎么处理变成表格?图片中的文字可以转文档吗?
平时大家在办公期间经常会用到一些图片以及表格内容,有时候会需要把图片中的文字转换成表格,有时候也需要把一些表格和图像转换成图片,这种转换格式的处理对许多人来说可能比较复杂。但是确实很多工作当中都需要用到的一些专业技巧,现在就来了解一下图片的文字怎么处理变成表格。
用户8715145
2021/12/31
13.6K0
Websocket IM聊天教程-教你用GoEasy快速实现IM聊天
经常有朋友问起GoEasy如何实现IM,今天就手把手的带大家从头到尾用GoEasy实现一个完整IM聊天,全套代码已经放在了gitee。
GoEasy消息推送
2020/05/15
3.9K0
Websocket IM聊天教程-教你用GoEasy快速实现IM聊天
利用Swoole实现简单IM聊天
本文为北溟有鱼QAQ原创文章,转载无需和我联系,但请注明来自北溟有鱼QAQ https://www.umdzz.cn
北溟有鱼QAQ
2019/12/19
1.6K0
利用Swoole实现简单IM聊天
基于sliverlight + wcf的web 文字版IM 示例
演示地址: http://task.24city.com/default.html 预览界面: 一、布局 采用Grid布局,5行2列 第一行:为登录/注册信息区 第二行:左列为聊天记录区,右列为"最近
菩提树下的杨过
2018/03/02
1.1K0
基于sliverlight + wcf的web 文字版IM 示例
im4java包处理图片
使用方法:首先要安装ImageMagick这个工具,安装好这个工具后,再下载im4java包放到项目lib目录里就行了。 package com.stu.util; import java.io.IOException; import java.util.ArrayList; import org.im4java.core.CompositeCmd; import org.im4java.core.ConvertCmd; import org.im4java.core.IM4
生活创客
2018/01/30
1.8K0
聊天IM的时间戳显示规则
======================================================
meteoric
2018/11/19
5K0
iOS音视频接入- IM及时通讯基本原理
即时通信(Instant Messaging,IM)基于 QQ 底层 IM 能力开发,仅需植入 SDK 即可 轻松集成聊天、会话、群组、资料管理能力,帮助您实现文字、图片、短语音、短视频等富 媒体消息收发,全面满足通信需要。
小明同学接音视频
2020/10/20
2.5K0
iOS音视频接入- IM及时通讯基本原理
IM系统海量消息数据是怎么存储的?
现在的IM系统,消息都要落地存储。这样如果接收消息的用户不在线,等他下次上线时,能获取到消息数据。
普通程序员
2019/10/23
8.2K0
IM系统海量消息数据是怎么存储的?
IM开发干货分享:网易云信IM客户端的聊天消息全文检索技术实践
在IM客户端的使用场景中,基于本地数据的全文检索功能扮演着重要的角色,最常用的比如:查找聊天记录、联系人,就像下图这样。
JackJiang
2021/08/03
3.4K0
iOS实现视频和图片的上传
这里有事先创建两个可变数组uploadArray, uploadedArray, 一个存放准要上传的内容, 一个存放上传完的内容
周希
2019/10/15
2.1K0
IM开发宝典:史上最全,微信各种功能参数和逻辑规则资料汇总
IM应用的初学者们,在补全了各种基础技术知识后(如果您仍不具备这些知识,建议马上阅读《新手入门一篇就够:从零开发移动端IM》),在动手编码实践时,很多时候纠结的并不是功能该如何实现,而是这个功能该实现成什么样(没有经验,我特玛能找谁问问?)。
JackJiang
2020/05/26
2.1K0
网络编程实战——IM系统是怎么通讯的
这是瓜子内部的一堂网络编程的培训课PPT
普通程序员
2019/10/23
9020
网络编程实战——IM系统是怎么通讯的
IM开发宝典:史上最全,微信各种功能参数和逻辑规则资料汇总
IM应用的初学者们,在补全了各种基础技术知识后(如果您仍不具备这些知识,建议马上阅读《新手入门一篇就够:从零开发移动端IM》),在动手编码实践时,很多时候纠结的并不是功能该如何实现,而是这个功能该实现成什么样(没有经验,我特玛能找谁问问?)。
JackJiang
2020/05/21
2.5K0
elui实现图片的上传
效果图 [2022-03-08_070933.png] 实现步骤 el-upload的使用 <el-form-item label="图片" prop="imgurl"> <el-upload class="avatar-uploader" action="" :http-request="getFile" :show-file-list="false"> <img s
用户6493868
2022/03/08
8170
图片文字不清楚怎么处理?怎么改变图片上文字的大小?
大家平时看到的许多网络图片当中,都会有一些文字注释或者是文字配图。有时候工作需要在网络上搜索一些图片,并且使用这些图片。如果遇到有些图片上的文字不太清楚,这种情况该怎么处理呢?很多对后期修图不太了解的人可能并不知道处理办法。现在就来看一看图片文字不清楚怎么处理。
用户8715145
2021/12/31
10.3K0
文字图片能不能转换成word 如何提取图片中的文字
现在办公自动化的普及,在办公室工作的人员在制作文案时,会使用到大量的资料,为了保存这些资料,很多人会使用拍照或者是扫描的方式,把内容通过文字图片保存起来,但是在进行编辑时,如果逐字敲成本文格式,会比较麻烦,也容易出错,这时就会遇到文字图片转为本文的情况,下面就来看看,文字图片能不能转换成word文档吧。
用户8715145
2021/06/18
25.9K0
拖拽上传图片,可以多张同时上传
在HTML5中,使用DataTransfer对象中提供的方法,可以实现浏览器与其他应用程序之间文件的拖动。
愤怒的小鸟
2020/12/14
3.7K0

相似问题

IOS IM 最新DEMO 发送图片报错?

1555

腾讯im发送图片?

11.2K

IM聊天上传图片加载速度感人???

2510

IM中发送加密后的图片失败。请问是不能对图片信息加密吗?

1349

android IM 图片发送失败?

1560
相关问答用户
到家集团 | 技术VP擅长5个领域
新浪微博 | 高级总监擅长4个领域
《用ChatGPT做软件测试》 | 作者擅长5个领域
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档