融云发送文件和图片消息

前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。

/uploads/files_user12/article/6077e745511c1832010.png

官方文档说明地址如下: 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);
                },
                onError: () => {
                    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);
              },
              onError: (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);
        },
        onError: 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);
        },
        onError:  (errorCode) => {
        }
        };
        this.rongIMClient.sendMessage(conversationType, targetId, msg, callback);
    },

至此,发送图片和文件消息完成,整体算是顺利……

融云官网地址:https://www.rongcloud.cn/


0 个评论

要回复文章请先登录注册