更新记录

1.0.0（2026-11-05） 下载此版本

• 创建 创建zh-priviewMedia项目，用于实现图片视频混排预览

平台兼容性

uni-app x(4.0)

zh-preview-media

• 基于官方uni-previewImage进行扩展，添加视频预览支持，底部缩略图支持
• Android已通过自定义基座打包真机测试 欢迎小伙伴们反馈。
• 有任何问题可直接邮件至zhuhao198877@163.com联系我
• 如果觉得好用，请给我一个五星好评吧~

提示

• 视频缩略图可通过外部传入，如外部未传入会使用官方uni.getVideoInfo获取thumbTempFilePath。受官方uni.getVideoInfox限制，可能存在无法获取到缩略图的情况。会使用内置的zw.png图片进行占位。
• 图片空间背景色为#666666，如图片为透明背景且背景色与#666666相近，图片展现不明显。

使用示例

zhPreviewMedia 图片预览

zhPreviewMedia(options: PreviewMediaOptions)

UrlOption 参数说明

export type UrlOption={
    /**
     * 需要预览的图片或视频链接
     */
    url:string.VideoURIString|string.ImageURIString,
    /**
     * 连接类型，不传输会根据文件后缀名进行判断
     */
    type?:'image'|'video',
    /**
     * 视频缩略图，未传入会使用官方uni.getVideoInfo获取thumbTempFilePath
     */
    thumburl?:string.ImageURIString,
    /**
     * 文件宽度，用于计算底部缩略图展现尺寸用，无需传入，会根据文件自动进行获取
     */
    width?:number,
    /**
     * 文件高度，用于计算底部缩略图展现尺寸用，无需传入，会根据文件自动进行获取
     */
    height?:number
}

PreviewMediaSuccessCallback 参数说明

export type PreviewMediaSuccess = {
    /**
     * 调用API的名称
     */
    errSubject : string,
    /**
     * 描述信息
     */
    errMsg : string
}
export type PreviewMediaSuccessCallback = (callback : PreviewMediaSuccess) => void

PreviewMediaFailCallback 参数说明

export interface IMediaError extends IUniError {
    errCode : MediaErrorCode
};
export type PreviewMediaFail = IMediaError;
export type PreviewMediaFailCallback = (callback : PreviewMediaFail) => void

PreviewMediaCompleteCallback 参数说明

export type PreviewMediaCompleteCallback = (callback : any) => void

PreviewMediaOptions 参数说明

export type PreviewMediaOptions = {

    /**
     * current 为当前显示图片的索引值，不填或填写的值无效则为 urls 的第一张。APP平台仅支持索引值。
     */
    current ?: number | null,
    /**
     * 需要预览的图片链接列表
     */
    urls : Array<UrlOption>,
    /**
     * 图片指示器样式
     * @default number
     *
     */
    indicator ?:
    /**
     * 底部缩略图+顶部数字指示器
     */
    'default' |
    /**
     * 底部缩略图
     */
    'thumb' |
    /**
     * 顶部数字指示器
     */
    'number' |
    /**
     * 不显示指示器
     */
    'none' |
    null,
    /**
     * 是否可循环预览
     * @type boolean
     * @default true
     */
    loop ?: boolean | null,
    /**
     * 长按图片显示操作菜单，如不填默认为保存相册。
     */
    longPressActions ?: LongTapActionsOptions | null,
    /**
     * 接口调用成功的回调函数
     */
    success ?: (PreviewMediaSuccessCallback) | null,
    /**
     * 接口调用失败的回调函数
     */
    fail ?: (PreviewMediaFailCallback) | null,
    /**
     * 接口调用结束的回调函数（调用成功、失败都会执行）
     */
    complete ?: (PreviewMediaCompleteCallback) 
    | null
};

示例

import { zhPreviewMedia,UrlOption,PreviewMediaOptions } from '@/uni_modules/zh-previewMedia';

const mediaUrl=ref<UrlOption[]>([
    {
        url:'https://wx2.sinaimg.cn/mw690/00839aAegy1htk3px3c2pj30u00zlwrg.jpg' //图片路径
    },
    {
        url:'https://wx2.sinaimg.cn/mw690/00839aAegy1htk3px3c2pj30u00zlwrg.jpg', //图片路径
        type:'image'
    },
    {
        url:'https://www.w3schools.com/html/movie.mp4', //视频路径
        type:'video',
        thumburl:'https://5b0988e595225.cdn.sohucs.com/images/20190624/513f23c7fecf4e889f502a4f510b780b.jpeg' //缩略图路径
    }
    ] as UrlOption[]) //链接对象列表

zhPreviewMedia({
    urls: mediaUrl,  //链接对象列表
    current: 0, // 当前显示图片的索引值
    indicator: 'default', // 指示器样式: 'default' | 'number' | 'thumb' | 'none' 
    loop: true, // 是否循环预览
    complete(e){
        console.log(e)
    }
} as PreviewMediaOptions)