FilePreview 文件预览

用于预览图片、音视频、文档等文件，也可结合全局配置完成鉴权和预览地址处理。

示例

基础用法

MtFilePreview 是函数式调用，不需要在模板中声明组件，调用后会自动创建弹窗并在关闭后自动卸载。

图片预览

支持预览 JPG、PNG、GIF、WEBP 等常见图片格式。

视频预览

支持预览 MP4 等浏览器原生支持的视频格式。

音频预览

支持预览 MP3 等浏览器原生支持的音频格式。

文档预览

PDF、Word、PPT 等文档会通过 iframe 使用第三方文档预览服务打开。

AI 音乐预览

对于 AI 生成音乐，可以指定标题、歌词和背景图，提供专门的预览界面。

API

Methods

方法名	说明
MtFilePreview(options)	创建并打开一个文件预览弹窗

Options

属性名	说明	类型	默认值
viewUrl	文件原始地址	string	-
previewParams	生成预览地址时传入的额外参数	Record<string, string>	-
title	AI 音乐预览标题	string	-
background	AI 音乐预览背景图	string	-
prompt	AI 音乐预览歌词	string	-

ConfigProvider

配置路径	说明	类型
filePreview.generatePreviewUrl	根据文件地址生成预览地址	(viewUrl: string, previewParams?: Record<string, string>) => string

Events

函数式预览弹窗关闭时会自动卸载 DOM，当前不对外暴露事件。

Slots

该函数式能力不提供固定插槽。

注意事项

• MtFilePreview 是函数式入口，调用后会在 document.body 下创建预览弹窗并在关闭后自动卸载。
• 已安装组件库插件时仍需要单独从 @mingto/mt-ui 导入该函数式入口。
• 调用 MtFilePreview 前需要通过 ConfigProvider 配置 filePreview.generatePreviewUrl；在模板中对应 prop 写作 file-preview。
• 私有文件预览建议在 generatePreviewUrl 中处理鉴权参数。
• 图片、视频、音频会直接使用原始地址预览；文档和 PPT 会使用 generatePreviewUrl 返回的地址在 iframe 中预览。
• 文件类型和预览能力以实际业务配置与浏览器支持为准。