融云发送文件和图片消息
2021/4/12 18:58:52
本文主要是介绍融云发送文件和图片消息,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
融云发送文件和图片消息
前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。
官方文档说明地址如下:
https://docs.rongcloud.cn/v4/views/im/noui/guide/group/msgmanage/msgsend/web.html
看过文档之后,才发现发送文件和图片消息是分两步的,首先要实现文件和图片的上传,然后拿到数据后发送消息。融云默认是存储到七牛服务器的,其实也可以上传到自己的服务器,由于是个demo,我暂时就存储到七牛啦。
文件和图片上传
demo地址:https://github.com/rongcloud/rongcloud-web-im-upload,用到的文件可以从以上demo地址中拿到。
上传暂时还不支持npm的引如方式,需要在html中引入上截图中的三个文件,顺序如下:
<script src = "./send-data.js"></script> <script src = "../upload.js"></script> <script src="./init.js"></script>
然后在input的change事件中,触发以下方法:
fileChange(evt, type) { this.currentType = type === 'img' ? RongIMLib.FileType.IMAGE : RongIMLib.FileType.FILE; const file = evt.target.files[0]; console.log('file', file); if (type === 'img') { UploadClient.initImage(this.config, (uploadFile) => { // 上传文件为: UploadClient.initFile uploadFile.upload(file, this.uploadCallbacks); }); } else { UploadClient.initFile(this.config, (uploadFile) => { uploadFile.upload(file, this.uploadCallbacks); }); } },
config配置如下:
config() { return { domain: 'http://upload.qiniu.com', fileType: this.currentType, getToken: (callback) => { this.rongIMClient.getFileToken(this.currentType , { onSuccess: (data) => { callback(data.token); }, one rror: () => { console.error('get file token error', error); } }); } } },
成功回调配置如下:
uploadCallbacks() { return { onProgress: (loaded, total) => { const percent = Math.floor(loaded / total * 100); console.log('已上传: ', percent); }, onCompleted: (data) => { this.currentFile = data; this.getFileUrl(data); }, one rror: (error) => { console.error('上传失败', error); } } },
注:如果是图片的话在onCompleted里面通过data.thumbnail是可以拿到图片的缩略图的。
接下来是获取文件或者图片的url,也需要在onComplete回调中获取,代码如下:
getFileUrl(data) { if (data.thumbnail) { this.currentFile.base64 = `data:image/jpg;base64,${data.thumbnail`; } this.rongIMClient.getFileUrl(this.currentType, data.filename, data.name, { onSuccess: (data) => { this.currentFile = Object.assign(this.currentFile, data); this.sendFileMessage(this.currentType); console.log('文件 url 为: ', data); }, one rror: function(error) { console.log('get file url error', error); } }) },
拿到文件或者图片的url之后就可以发送图片或者文件消息了。
文件和图片消息发送
发消息代码如下:
sendFileMessage(type) { let msg = {}; if (type === RongIMLib.FileType.IMAGE) { msg = new RongIMLib.ImageMessage({content: this.currentFile.base64, imageUri: this.currentFile.downloadUrl}); } else { msg = new RongIMLib.FileMessage({name: this.currentFile.name, size: this.currentFile.size, type: this.currentFile.type, fileUrl: this.currentFile.downloadUrl}); } var conversationType = this.targetUser.conversationType; var targetId = this.targetUser.id; // 目标 Id var callback = { onSuccess: (message) => { this.handleMessage(message); }, one rror: (errorCode) => { } }; this.rongIMClient.sendMessage(conversationType, targetId, msg, callback); },
至此,发送图片和文件消息完成,整体算是顺利……
融云官网地址:https://www.rongcloud.cn/
这篇关于融云发送文件和图片消息的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?