用途
Syncfusion FileManager 组件是一个企业级、基于 Web 的文件管理系统,用于浏览、管理并组织文件与文件夹。当需要创建企业级文件浏览器或文档管理界面、实现带校验的完整文件上传下载功能、定制工具栏/上下文菜单/视图、构建多选文件选择界面、实现带自定义校验的拖放文件处理、接入自定义文件系统提供程序(如 Physical、Azure、S3 等)、应用本地化与 RTL 及多语言界面、实现访问控制与基于角色的权限、用虚拟化优化大文件列表、执行自定义排序/过滤/搜索、构建嵌套或扁平文件数据结构、跨会话持久化组件状态、定制缩略图与文件预览、构建目录上传功能时,可使用本技能。
主要能力
组件提供较完整的文件操作与定制能力,包括:文件上传/下载、CRUD 操作、目录上传、搜索;工具栏、上下文菜单与导航窗格的定制;Details 与 Large Icons 等视图模式、面包屑、导航窗格、虚拟化;拖放、多选、Shift+Click 范围选择、本地化、RTL、访问控制;自定义提供程序、嵌套/扁平数据结构、排序与校验、访问控制;AJAX 配置、服务端通信与请求/响应处理;多语言支持、区域设置、自定义翻译;HTML 净化(enableHtmlSanitizer,默认开启)以防 XSS;状态持久化(视图、路径与选择)。
使用方式
最小初始化步骤:从 @syncfusion/ej2-filemanager 引入 FileManager、Toolbar、NavigationPane、DetailsView;调用 FileManager.Inject 注入所需模块;使用 ajaxSettings 配置服务端端点(url、getImageUrl、uploadUrl、downloadUrl)、height、width;最后调用 appendTo 渲染到 DOM 元素。
样式方面,先安装 Fluent 2 主题包(npm install @syncfusion/ej2-fluent2-theme --save),再在 index.css 中引入 file-manager 的 index.css(其会自动加载所需依赖样式),然后在 HTML 中提供容器并加载 index.js。
配置对象包括 AjaxSettings(url、uploadUrl、downloadUrl、getImageUrl)、UploadSettings(allowedExtensions、autoClose、autoUpload、chunkSize、directoryUpload、maxFileSize 默认 30000000 字节、minFileSize、sequentialUpload)、ToolbarSettings(items、visible)、ContextMenuSettings(file、folder、layout、visible)、NavigationPaneSettings(visible 默认 true、maxWidth 默认 200px、minWidth 默认 150px)、DetailsViewSettings(columns、hideColumns)、SearchSettings(filterType 默认 StartsWith,可选 Contains、EndsWith;ignoreCase 默认 true)。
核心属性包括 ajaxSettings、allowDragAndDrop(默认 false)、allowMultiSelection(默认 true)、contextMenuSettings、cssClass、detailsViewSettings、enableHtmlSanitizer(默认 true)、enablePersistence(默认 false)、enableRangeSelection(默认 false)、enableRtl(默认 false)、enableVirtualization(默认 false)、fileSystemData(本地文件数据数组,每项需含 dateCreated、dateModified、filterPath、hasChild、id、isFile、name、parentId、size、type)、height(默认 400px)、largeIconsTemplate、locale(默认 en-US)、navigationPaneSettings、navigationPaneTemplate、path(默认 /)、popupTarget、rootAliasName、searchSettings、selectedItems、showFileExtension(默认 true)、showHiddenItems(默认 false)、showItemCheckBoxes(默认 true)、showThumbnail(默认 true)、sortBy(默认 name)、sortComparer、sortOrder(默认 Ascending,可选 Ascending、Descending、None)、toolbarItems、toolbarSettings、uploadSettings、view(默认 LargeIcons,可选 LargeIcons 或 Details)、width(默认 100%)。
方法涵盖文件操作(openFile、deleteFiles、renameFile、createFolder、downloadFiles、uploadFiles、refreshFiles、filterFiles)、选择管理(selectAll、clearSelection、getSelectedFiles)、导航与视图(traverseBackward、refresh、refreshLayout)、工具栏与菜单管理(enableToolbarItems、disableToolbarItems、getToolbarItemIndex、enableMenuItems、disableMenuItems、getMenuItemIndex)、对话框管理(closeDialog)、组件生命周期(appendTo、destroy、dataBind、getRootElement)、事件管理(addEventListener、removeEventListener)以及模块注入(Inject)。
适用场景与限制
适用于需要企业级文件浏览、文档管理、上传下载校验、多选与范围选择、拖放处理、多语言与 RTL、访问控制、大列表虚拟化、跨会话状态持久化等能力的前端集成场景。限制方面:资料中未提供关于收费、价格、平台或明确效果的数据,均暂未提供;默认值、属性、方法与配置对象的具体行为以资料所列内容为准,资料未提及的功能不在此展开。