融云聊天发图片消息

最新推荐文章于 2021-08-11 16:26:18 发布
置顶 hexu_blog
最新推荐文章于 2021-08-11 16:26:18 发布
阅读量2.1k
点赞数 1
分类专栏：前端 java 文章标签：融云发送消息图片 java使用融云发消息图片
本文链接：https://blog.csdn.net/hexu_blog/article/details/89925128
版权
java 同时被 2 个专栏收录
47 篇文章 0 订阅
订阅专栏
前端
24 篇文章 0 订阅
订阅专栏
首先它上传的服务器不是融云本地的，文档上面提示有阿里云和七牛，我这里介绍的是七牛

1.先去https://github.com/rongcloud/rongcloud-web-im-upload/blob/master/qiniu/message.html下载dome

2.去下载七牛上传插件

3.当然就是导入js插件了，记住，顺序不要反，要安装dome上面的顺序来，不然会错误的，js就是下面的代码，我标出的红色区域是需要注意的，它上面的token和上传的url不需要你修改，上面是写死的



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Qiniu - Upload </title>
    <script src = "./qiniu.js"></script>
    <script src = "../upload.js"></script>
    <script src="./init.js"></script>
    <script src='http://cdn.ronghub.com/RongIMLib-2.2.5.min.js'></script>
   <style type = "text/css">
    .container{
        position: absolute; 
        height: 40px; 
        width: 300px; 
        color: Silver;
        border-width: 1px; 
        border-style: Solid;
    }
    .progressBar{
        position: absolute; 
        height: inherit; 
        width: 0%; 
        background-color: gray;
    }

    .progressContent{
        position: absolute; 
        height: inherit; 
        width: 100%;
        text-align:center; 
        font-size:32px;
    }
    #tips{
        float: right;
        width: 60vw;
        background-color: #E5E5E5;
        height: 95vh;
        font-size: 13px;
        overflow: scroll;
    }
    #upload{
        display: none;
        float: left;
    }
    .warn{
        color: red;
    }

</style>
</head>
<body>
    <div id="upload">

        <p><input type="file" id="file-Id" value="upload-file" /></p>
        <div class="container" id="container">
            <div class = "progressBar" id= "progressBar"></div>
            <div class = "progressContent" id = "progressContent">
            </div>
        </div> 
        
    </div>

    <div id="tips">
        <span class="warn">
        ******************************<br/>
        * 使用融云文件存储注意事项： <br/>
        * 1、有效期为 1 个月<br/>
        * 2、文件不支持迁移<br/>
        ******************************<br/>
    </span>
    </div>
    
</body>
<script>

    var getDom = function(id){
        return document.getElementById(id);
    };

    var stringFormat = function(str, vals) {
        for (var i = 0, len = vals.length; i < len; i++) {
            var val = vals[i],
                reg = new RegExp("\\{" + (i) + "\\}", "g");
            str = str.replace(reg, val);
        }
        return str;
    };

    var showResult = function(content, showLine){
        var style = showLine ? '<br/><hr/>' : '<br/>';
        getDom('tips').innerHTML += '<span>'  + content +  '</span>' + style;
    };

    var onConnected = function(im){

        var showLogs = function(title, content, path){
            title && showResult(title);
            content && showResult('&nbsp;&nbsp;' + JSON.stringify(content));
            path = path || '';
            showResult(path, true);
        };

        var createA = function(url){
            var tmpl = '<a href={0} target="_blank">[{1}]</a><br>', str = '';
            url = Object.prototype.toString.call(url) == '[object Array]' ? url : [url];
            for(var i= 0, len = url.length; i < len; i++){
                var item = url[i];
                str += stringFormat(tmpl, [item.url, item.memo]);
            }
            return str;
        };

        var messageItem = {
            file: function(file){
                var name = file.name || '',
                index = name.lastIndexOf('.') + 1,
                type = name.substring(index);

                // 发送文件消息请参考： http://rongcloud.cn/docs/web_api_demo.html#发送消息
                // 创建文件消息
                return new RongIMLib.FileMessage({ name: file.name, size: file.size, type: type, fileUrl: file.downloadUrl});
            },
            image: function(image){
                return new RongIMLib.ImageMessage({content: image.thumbnail, imageUri: image.downloadUrl});
            }
        };
        var createMessage = function(file){

            var msg = messageItem[file.fileType](file);
            var path = createA({ memo:'发送消息', url: 'http://rongcloud.cn/docs/web_api_demo.html#发送消息'});
            showLogs("创建文件消息: ", msg, path);

            var docs = [{ memo:'文件上传', url: 'https://github.com/rongcloud/rongcloud-web-im-upload/tree/master/qiniu'},
                        { memo:'开发指南', url: 'http://rongcloud.cn/docs/web.html'},
                        { memo:'示例文档', url: 'http://rongcloud.cn/docs/web_api_demo.html'},
                        { memo:'示例 Demo', url: 'https://shuise.github.io/tech-research/web-sdk-test/web-sdk-test.html'}];

            var path = createA(docs);
            showLogs('常用文档：', '', path);
        };

        var urlItem = {
            file: function(data){
                var fileType = RongIMLib.FileType.FILE;
                im.getFileUrl(fileType, data.filename, data.name, {
                    onSuccess: function(result){
                        showLogs("获取文件 URL：", result);
                        data.downloadUrl = result.downloadUrl;  //这里就是返回上传成功你根据这里去显示图片的路径了
                        createMessage(data);
                    },
                    onError: function(error){
                        showResult('getFileToken error:' + error);
                    }
                });
            },
            image: function(data){
                var fileType = RongIMLib.FileType.IMAGE;
                im.getFileUrl(fileType, data.filename, null, {
                    onSuccess: function(result){
                        showLogs("获取文件 URL：", result);
                        data.downloadUrl = result.downloadUrl;
                        createMessage(data);
                    },
                    onError: function(error){
                        showResult('getFileToken error:' + error);
                    }
                });
            }
        };
        var getFileUrl = function(data){
            urlItem[data.fileType](data);
        };
        
        var getFileType = function(filename){
            // 默认支持两种图片格式，可自行扩展
            var imageType = {
                'jpg': 1,
                'png': 2
            };
            var index = filename.lastIndexOf('.') + 1,
                type = filename.substring(index);
            return type in imageType ? 'image': 'file';
        };

        var callback = {
            onError    : function (errorCode) { 
                showResult(errorCode);
            },
            onProgress : function (loaded, total) {
                var percent = Math.floor(loaded/total*100);
                var progressBar     = document.getElementById('progressBar'), 
                    progressContent = document.getElementById('progressContent');
                    progressBar.style.width = percent + '%';
                    progressContent.innerHTML = percent + "%";
            },
            onCompleted : function (data) { 
                showLogs("文件上传完成：", data);//获取base64在这里获取data中有所有的信息，但是获取图片路径在这里不能获取的，只能在上面我说的提示中获取

                data.fileType = getFileType(data.name);
                getFileUrl(data);
            } 
        };

        // 上传文件
        var file = document.getElementById("file-Id");

        var config = { 
            domain: 'http://upload.qiniu.com',
            fileType: RongIMLib.FileType.IMAGE,
            getToken: function(callback){
                /****************************
                 * 使用融云文件存储注意事项：
                 * 1、有效期为 1 个月。
                 * 2、文件不可迁移。
                 ****************************
                 */
                im.getFileToken(this.fileType, {
                    onSuccess: function(data){
                        callback(data.token);
                    },
                    onError: function(error){
                        showResult('getFileToken error:' + error);
                    }
                });
            }
        };

        var initType = {
            file: function(_file){
                config.fileType = RongIMLib.FileType.FILE;
                UploadClient.initFile(config, function(uploadFile){
                    uploadFile.upload(_file, callback);
                });
            },
            image: function(_file){
                UploadClient.initImage(config, function(uploadFile){
                    uploadFile.upload(_file, callback);
                });
            }
        };

        file.onchange = function(){
            var _file = this.files[0];
            initType[getFileType(_file.name)](_file);
        };
    };    

    var connect = function(){
        var appkey = '8luwapkvucoil';
        RongIMLib.RongIMClient.init(appkey);

        RongIMClient.setConnectionStatusListener({
            onChanged: function (status) {
                switch (status) {
                    case RongIMLib.ConnectionStatus.CONNECTED:
                        getDom('upload').style.display = 'block';
                        break;
                    }
            }
        });
        RongIMClient.setOnReceiveMessageListener({
            onReceived: function (message) {
                showResult(message);
            }
        });

        var token = '183RX8CR4UcXlV3cANZXnbrkPG6U/xPk3zvPIWf9le0qIwLgOI54+IqjxPVY5a9jZgJ+5WjBf5egVjidhq2Rfg==';
        showResult('connecting');
        RongIMClient.connect(token, {
            onSuccess: function(userId) {
                  showResult("connected." + userId, true);
                  onConnected(RongIMClient.getInstance());
            },
            onTokenIncorrect: function() {
                  showResult('token无效');
            },
            onError:function(errorCode){
                   showResult(errorCode);
            }
        });
    };
    connect();
</script>

</html>
hexu_blog
关注
1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
融云聊天发图片消息

首先它上传的服务器不是融云本地的，文档上面提示有阿里云和七牛，我这里介绍的是七牛1.先去https://github.com/rongcloud/rongcloud-web-im-upload/blob/master/qiniu/message.html下载dome2.去下载七牛上传插件3.当然就是导入js插件了，记住，顺序不要反，要安装dome上面的顺序来，不然会错误的，js就是下...
复制链接

扫一扫