• 文档首页

上传

兼容

支持浏览器范围:

IE10+、Edge、Chrome 49+、Firefox 52+、Safari 等主流桌面版浏览器

注意事项

1. 上传插件仅提供一种上传文件的方式, 不包含发送消息
2. 融云默认上传文件存储有效期为 6 个月, 上传的文件不支持迁移
3. 融云默认存储为七牛云
4. 插件提供的是上传方式, 开发者也可通过自己的方式将文件上传至自己文件服务
5. 发送文件消息只需要文件上传后的 url, 具体请参考: 消息发送模块

代码示例：https://github.com/rongcloud/rongcloud-web-im-upload

引入

<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);
  }
})