融云发送文件和图片消息
前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。
官方文档说明地址如下:
https://docs.rongcloud.cn/v4/...
看过文档之后,才发现发送文件和图片消息是分两步的,首先要实现文件和图片的上传,然后拿到数据后发送消息。融云默认是存储到七牛服务器的,其实也可以上传到自己的服务器,由于是个demo,我暂时就存储到七牛啦。
文件和图片上传
demo地址:https://github.com/rongcloud/...
上传暂时还不支持npm的引如方式,需要在html中引入上截图中的三个文件,顺序如下:
然后在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/