SmartParks_uniapp/utils/mediaSelector.README.md

媒体选择器工具类 (MediaSelector)

这是一个用于在uni-app项目中选择本地图片和视频的工具类，提供了统一的接口和灵活的配置选项。

功能特点

• 支持选择图片、视频或让用户选择图片/视频
• 支持设置选择数量
• 支持设置是否压缩
• 支持图片裁剪
• 支持设置视频最大时长
• 支持设置使用的摄像头（前置/后置）
• 支持设置允许的文件扩展名
• 提供媒体预览功能

安装和使用

1. 导入工具类

import MediaSelector, { MediaType } from '@/utils/mediaSelector';

2. 选择图片

// 选择最多9张图片
const images = await MediaSelector.choose({
  type: MediaType.IMAGE,
  count: 9,
  compressed: true,
  crop: false
});

console.log('选择的图片：', images);

3. 选择视频

// 选择最多1个视频
const videos = await MediaSelector.choose({
  type: MediaType.VIDEO,
  count: 1,
  compressed: true,
  videoMaxDuration: 60 // 最长60秒
});

console.log('选择的视频：', videos);

4. 选择图片或视频（用户可选择）

// 让用户选择图片或视频
const media = await MediaSelector.choose({
  type: MediaType.BOTH,
  count: 5
});

console.log('选择的媒体：', media);

5. 预览媒体

// 预览媒体（自动判断类型）
if (media.length > 0) {
  MediaSelector.preview(media[0].path, media[0].type);
}

API 文档

MediaType 枚举

export const MediaType = {
  IMAGE: 'image', // 图片
  VIDEO: 'video', // 视频
  BOTH: 'both'    // 图片和视频
};

MediaSelector.choose(options)

选择媒体文件（图片或视频）。

参数

参数名	类型	默认值	说明
options.type	string	'image'	媒体类型，可选值：'image'、'video'、'both'
options.count	number	9	最大选择数量
options.imageExtensions	Array	['png', 'jpg', 'jpeg', 'gif', 'webp']	图片扩展名
options.videoExtensions	Array	['mp4', 'mov', '3gp', 'avi', 'rmvb', 'rm', 'flv', 'mkv']	视频扩展名
options.compressed	boolean	true	是否压缩所选文件
options.crop	boolean	false	是否裁剪（仅对图片有效）
options.videoMaxDuration	number	60	拍摄视频最长拍摄时间，单位秒
options.camera	string	'back'	使用的摄像头，可选值：'back'、'front'

返回值

返回一个Promise，解析为选择的媒体文件数组。每个媒体文件对象包含以下属性：

• 图片对象属性：

  • path: 文件路径
  • size: 文件大小（字节）
  • name: 文件名
  • type: 媒体类型（'image'）
  • extension: 文件扩展名
  • createTime: 创建时间戳

• 视频对象属性：

  • path: 文件路径
  • size: 文件大小（字节）
  • duration: 视频时长（秒）
  • width: 视频宽度
  • height: 视频高度
  • name: 文件名
  • type: 媒体类型（'video'）
  • extension: 文件扩展名
  • createTime: 创建时间戳

MediaSelector.preview(path, type)

预览媒体文件。

参数

参数名	类型	默认值	说明
path	string	-	文件路径
type	string	自动判断	媒体类型，可选值：'image'、'video'，默认根据文件扩展名自动判断

注意事项

1. 由于uni.chooseVideo一次只能选择一个视频，当设置count>1时，工具类会引导用户多次选择。
2. 视频预览功能需要一个视频播放页面，默认路径为/pages/common/video-player，如果您的项目中没有此页面，请自行创建或修改预览方法。
3. 在某些平台上，部分功能可能受到限制，请根据实际情况调整使用方式。

示例代码

完整的使用示例请参考 mediaSelector.example.js 文件。