融雲聊天發圖片消息
首先它上傳的服務器不是融雲本地的，文檔上面提示有阿里雲和七牛，我這裏介紹的是七牛
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(' ' + 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>
