全部产品
云市场
云游戏

文件管理器

更新时间:2020-06-12 15:21:44

介绍

  • FileExplorer Widget,即红框部分内容抽离成独立的视图,供其他web系统集成。
  • 支持一个drive 或一个share下面的文件浏览和操作等功能。

abc

接入步骤

1. 在控制台创建domain并开通 BasicUI

FileExplorer Widget由 CCP 官方应用 Basic UI 提供,所以需要先开通 Basic UI。

Basic UI开通后,先以超级管理员身份登入一次,以同步数据。

2. 服务端通过JWT接入

参考文档: JWT应用接入

3. 页面接入

(1) 引入js

  1. <script src="https://g.alicdn.com/ccp/ccp-widgets/${version}/index.min.js"></script>

(2) 初始化 widget

  1. <div id="container"></div>

挂载接入:

  1. var ins = CCPWidgets.createFileExplorer({
  2. //如果不设置mount, 默认mount到body
  3. mount: document.querySelector('#container'),
  4. endpoint: 'http://hz001.apps.alicloudccp.com',
  5. path_type: 'OSSPath',
  6. drive_id: '1'
  7. });

(3) setToken

从服务端获取 tokenInfo 后, setToken

  1. ins.setToken(tokenInfo)

即可看到 FileExplorer Widget 界面。

(4) 错误捕获

  1. var tid;
  2. ins.on('error', function(error){
  3. if (error.errorCode == 'TokenExpired') {
  4. //token 过期,需要重新获取token,并 setToken,注意防抖
  5. clearTimeout(tid)
  6. tid = setTimeout(() => {
  7. console.log('需要重新刷新token')
  8. //ins.setToken(tokenInfo);
  9. }, 300)
  10. }
  11. else {
  12. //其他error 处理
  13. }
  14. })

(5) 自定义文件预览(可选功能)

  • 增加配置: noOpenFileExtensions
  1. var ins = CCPWidget.createFileExplorer({
  2. ...
  3. config: {
  4. //如果是这些后缀,点击文件的时候不打开默认的预览
  5. noOpenFileExtensions: ['.pdf']
  6. }
  7. })
  • 监听打开文件预览
  1. ins.on('openFile', function(opt){
  2. //所有打开文件预览,都会通知过来
  3. //opt.noOpen==false 表示不打开默认预览, 配合 config.noOpenFileExtensions 可以实现自定义打开方式
  4. console.log("自定义打开方式", opt)
  5. })

API 详细参数说明

1. createFileExplorer 方法

  1. CCPWidgets.createFileExplorer(opt)
  • 注意:需要依赖 BasicUI,请先到控制台[开通 Basic UI]。

2. 参数说明

(1) opt[]参数说明:

字段 必须 类型 描述
domain_id String domain_id 和 endpoint 必选一个
endpoint String domain_id 和 endpoint 必选一个, 如: https://hz01.apps.alicloudccp.com
path_type String 可选:[OSSPath,CCPPath]
drive_id String drive_id 和 share_id 必选一个
share_id String drive_id 和 share_id 必选一个
open_folder_key String 第一次载入后默认打开的目录路径。如果path_type为OSSPath时,此处应为一个文件路径,如:/folder/。如果path_type为CCPPath时, 此处应为一个folder ID。默认为根目录。
url String (不建议使用) url和上面所有参数互斥,一旦设置了url,上面所有参数都无效。Basic UIdrive 或者 share 的Widget地址。如: https://hz01.apps.alicloudccp.com/widget/oss/drive/1
mount HtmlElement 挂载到哪个 html 元素,比如: document.querySelector('#container')
config Object 其他配置
verbose Boolean 打印调试日志, 默认: false

(2) opt.config[] 参数说明:

字段 必须 类型 描述
noOpenFileExtensions Array<string> 不打开默认预览的文件后缀数组。 如果是这些后缀,点击文件的时候不打开默认的预览,如: ['.pdf']
previewMode Boolean 是否预览模式(只读模式)。默认:false