上传
兼容¶
支持浏览器范围:
IE10+、Edge、Chrome 49+、Firefox 52+、Safari 等主流桌面版浏览器
注意事项
- 上传插件仅提供一种上传文件的方式, 不包含发送消息
- 融云默认上传文件存储有效期为
6 个月
, 上传的文件不支持迁移 - 融云默认存储为
七牛云
- 插件提供的是上传方式,
开发者也可通过自己的方式将文件上传至自己文件服务
- 发送文件消息只需要文件上传后的 url, 具体请参考: 消息发送模块
引入¶
<script src = "./qiniu.js"></script>
<script src = "../upload.js"></script>
<script src="./init.js"></script>
上传 token¶
必须 IM SDK 连接成功后, 才能使用此方法
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
fileType | Number | 是 | 上传类型, 通过 RongIMLib.FileType 获取 |
callbacks | Object | 是 | 回调对象 |
代码示例:
// IM 已连接成功
var fileType = RongIMLib.FileType.IMAGE; // 图片类型
RongIMClient.getInstance().getFileToken(fileType, {
onSuccess: function(data) {
console.log('上传 token 为', data.token);
},
onError: function(error) {
console.log('get file token error', error);
}
})
开始上传¶
config 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
domain | String | 是 | 上传地址, 默认为七牛: http://upload.qiniu.com |
fileType | Number | 是 | 上传类型 |
getToken | Function | 是 | 获取 token 回调 |
upload callbacks 参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
domain | String | 是 | 上传地址, 默认为七牛: http://upload.qiniu.com |
fileType | Number | 是 | 上传类型 |
getToken | Function | 是 | 获取 token 回调 |
代码示例:
<!-- 创建 input 上传按钮 -->
<input id="uploadFile" type="file">
var fileType = RongIMLib.FileType.IMAGE; // 图片类型
var config = {
domain: '',
fileType: fileType,
getToken: function(callback) {
RongIMClient.getInstance().getFileToken(fileType, {
onSuccess: function(data){
callback(data.token);
},
onError: function(){
console.error('get file token error', error);
}
});
}
};
var uploadCallbacks = {
onProgress: function(loaded, total) {
var percent = Math.floor(loaded / total * 100);
console.log('已上传: ', percent);
},
onCompleted: function(data) {
// 上传完成, 调用 getFileUrl 获取文件下载 url
},
onError: function(error) {
console.error('上传失败', error);
}
};
var uploadEl = document.getElementById("uploadFile");
uploadEl.onchange = function() {
var _file = this.files[0]; // 上传的 file 对象
UploadClient.initImage(config, function(uploadFile) { // 上传文件为: UploadClient.initFile
uploadFile.upload(_file, uploadCallbacks);
});
}
下载 url¶
fileType 值需与 getFileToken
时传入的 fileType 值一致
参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
fileType | Number | 是 | 上传类型, 通过 RongIMLib.FileType 获取 |
filename | String | 是 | 上传后的文件名, 上传成功后可获取 |
oriname | String | 是 | 文件原名 |
callbacks | Object | 是 | 回调对象 |
代码示例:
// data 通过 uploadFile.upload 获取
var fileType = RongIMLib.FileType.IMAGE; // 图片类型
RongIMClient.getInstance().getFileUrl(fileType, data.filename, data.name, {
onSuccess: function(data) {
console.log('文件 url 为: ', data.downloadUrl);
},
onError: function(error) {
console.log('get file url error', error);
}
})