uniapp 图片视频预览功能如何实现

在uniapp中如何实现图片和视频的预览功能？我需要同时支持本地和网络资源的预览，最好能兼容iOS和安卓平台。目前尝试了uni.previewImage方法，但不知道如何集成视频预览功能，以及如何处理大文件加载时的性能问题。希望了解完整的实现方案，包括必要的代码示例和注意事项。

2 回复

在uni-app中，可使用uni.previewImage预览图片，传入图片URL数组和当前索引。视频预览可用uni.createVideoContext创建播放器，或使用第三方插件如uni-media。注意H5端需处理兼容性。


在 UniApp 中实现图片和视频预览功能，可以使用内置的 uni.previewImage 和 uni.previewMedia API。以下是具体实现方法：

图片预览

使用 uni.previewImage 预览单张或多张图片：

// 预览单张图片
uni.previewImage({
  urls: ['https://example.com/image1.jpg'], // 图片 URL 数组
  current: 0 // 当前显示图片的索引
});

// 预览多张图片
uni.previewImage({
  urls: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ],
  current: 1 // 从第二张开始显示
});

视频预览（H5 和 App 端）

使用 uni.previewMedia 预览视频（注意：微信小程序不支持）：

uni.previewMedia({
  sources: [
    {
      type: 'video',
      url: 'https://example.com/video1.mp4'
    },
    {
      type: 'image',
      url: 'https://example.com/image1.jpg'
    }
  ],
  current: 0 // 从第一个资源开始显示
});

完整示例代码

<template>
  <view>
    <!-- 图片预览示例 -->
    <image 
      src="https://example.com/thumb.jpg" 
      @click="previewImage" 
      mode="aspectFit"
    />
    
    <!-- 视频预览示例 -->
    <video 
      src="https://example.com/video.mp4" 
      @click="previewVideo" 
      controls
    />
  </view>
</template>

<script>
export default {
  methods: {
    previewImage() {
      uni.previewImage({
        urls: ['https://example.com/full-size-image.jpg'],
        current: 0
      });
    },
    previewVideo() {
      // 注意：微信小程序需使用自有视频组件
      // #ifdef H5 || APP-PLUS
      uni.previewMedia({
        sources: [{
          type: 'video',
          url: 'https://example.com/video.mp4'
        }],
        current: 0
      });
      // #endif
    }
  }
}
</script>

注意事项：

  1. 平台差异：
    • previewImage 全平台支持
    • previewMedia 仅 H5 和 App 端支持，微信小程序需使用 wx.previewMedia（需条件编译）
  2. 路径处理：
    • 网络图片/视频需配置域名白名单
    • 本地文件使用相对路径（如 /static/image.jpg）
  3. 性能优化：大文件建议使用缩略图预览，点击后再加载原图

这样即可在 UniApp 中快速实现图片和视频预览功能。

回到顶部