144 lines
3.8 KiB
Markdown
144 lines
3.8 KiB
Markdown
|
# 媒体选择器工具类 (MediaSelector)
|
|||
|
|
|
|||
|
|
这是一个用于在uni-app项目中选择本地图片和视频的工具类，提供了统一的接口和灵活的配置选项。
|
|||
|
|
|
|||
|
|
## 功能特点
|
|||
|
|
|
|||
|
|
- 支持选择图片、视频或让用户选择图片/视频
|
|||
|
|
- 支持设置选择数量
|
|||
|
|
- 支持设置是否压缩
|
|||
|
|
- 支持图片裁剪
|
|||
|
|
- 支持设置视频最大时长
|
|||
|
|
- 支持设置使用的摄像头（前置/后置）
|
|||
|
|
- 支持设置允许的文件扩展名
|
|||
|
|
- 提供媒体预览功能
|
|||
|
|
|
|||
|
|
## 安装和使用
|
|||
|
|
|
|||
|
|
### 1. 导入工具类
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import MediaSelector, { MediaType } from '@/utils/mediaSelector';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 选择图片
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 选择最多9张图片
|
|||
|
|
const images = await MediaSelector.choose({
|
|||
|
|
type: MediaType.IMAGE,
|
|||
|
|
count: 9,
|
|||
|
|
compressed: true,
|
|||
|
|
crop: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('选择的图片：', images);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 选择视频
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 选择最多1个视频
|
|||
|
|
const videos = await MediaSelector.choose({
|
|||
|
|
type: MediaType.VIDEO,
|
|||
|
|
count: 1,
|
|||
|
|
compressed: true,
|
|||
|
|
videoMaxDuration: 60 // 最长60秒
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('选择的视频：', videos);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 选择图片或视频（用户可选择）
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 让用户选择图片或视频
|
|||
|
|
const media = await MediaSelector.choose({
|
|||
|
|
type: MediaType.BOTH,
|
|||
|
|
count: 5
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('选择的媒体：', media);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. 预览媒体
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 预览媒体（自动判断类型）
|
|||
|
|
if (media.length > 0) {
|
|||
|
|
MediaSelector.preview(media[0].path, media[0].type);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API 文档
|
|||
|
|
|
|||
|
|
### MediaType 枚举
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
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<string> | ['png', 'jpg', 'jpeg', 'gif', 'webp'] | 图片扩展名 |
|
|||
|
|
| options.videoExtensions | Array<string> | ['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` 文件。
|