SDK 导入
-
在官网中,我们有提供插件的下载地址,不过该插件只适用于公有云。由于私有云环境的特殊性,需使用如下插件:
-
上述安装包解压后,可通过 script 标签分别进行导入
// 注意 sdk 导入顺序
<script src="./xxx/md5.min.js"></script>
<script src = "./xxx/rc.js"></script>
<script src = "./xxx/upload.js"></script>
<script src="./xxx/init.js"></script>
开始上传
上传动作实际与官网描述是一致的,只是私有云用户不需要再进行 getFileUrl 获取文件地址。该地址可以在上传成功回调中获取到
代码示例:
// 创建 input 上传按钮
<input id="uploadFile" type="file">
var file;
var fileType = RongIMLib.FileType.IMAGE;
var uploadEl = document.getElementById("uploadFile");
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 config = {
domain: '',
fileType,
getToken: function(callback) {
var caback={
onSuccess: function(data){
callback(data.token);
},
onError: function(){
console.error('get file token error', error);
}
}
RongIMClient.getInstance().getFileToken(fileType, caback, fileName);
}
};
var callback = {
onProgress: function(loaded, total) {
var percent = Math.floor(loaded / total * 100);
console.log('已上传: ', percent);
},
onCompleted: function(data) {
// 上传完成, data 中有返回远端的服务地址
// 需要注意的是,该地址是绝对路径,如果您要访问需要前面需要带上您文件服务域名
console.log('上传成功: ', data);
},
onError: function(error) {
console.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);
});
}
};
uploadEl.onchange = function() {
// 根据文件名选择不同的初始化方式
file = this.files[0]; // 上传的 file 对象;
initType[getFileType(file.name)](file);
}