1.合并前段时间写的页面
This commit is contained in:
328
utils/mediaSelector.js
Normal file
328
utils/mediaSelector.js
Normal file
@@ -0,0 +1,328 @@
|
||||
/**
|
||||
* 媒体选择器工具类
|
||||
* 用于选择本地图片和视频
|
||||
* 支持设置选择类型（图片、视频或两者）和选择数量
|
||||
*/
|
||||
|
||||
// 媒体类型枚举
|
||||
export const MediaType = {
|
||||
IMAGE: 'image',
|
||||
VIDEO: 'video',
|
||||
BOTH: 'both'
|
||||
};
|
||||
|
||||
/**
|
||||
* 媒体选择器类
|
||||
*/
|
||||
export default class MediaSelector {
|
||||
/**
|
||||
* 选择媒体文件（图片或视频）
|
||||
* @param {Object} options 选择配置项
|
||||
* @param {string} options.type 媒体类型，可选值：'image'、'video'、'both'，默认为'image'
|
||||
* @param {number} options.count 最大选择数量，默认为9
|
||||
* @param {Array<string>} options.imageExtensions 图片扩展名，默认为['png', 'jpg', 'jpeg', 'gif', 'webp']
|
||||
* @param {Array<string>} options.videoExtensions 视频扩展名，默认为['mp4', 'mov', '3gp', 'avi', 'rmvb', 'rm', 'flv', 'mkv']
|
||||
* @param {boolean} options.compressed 是否压缩所选文件，默认为true
|
||||
* @param {boolean} options.crop 是否裁剪（仅对图片有效），默认为false
|
||||
* @param {number} options.videoMaxDuration 拍摄视频最长拍摄时间，单位秒，默认为60
|
||||
* @param {string} options.camera 使用的摄像头，可选值：'back'、'front'，默认为'back'
|
||||
* @returns {Promise<Array>} 返回选择的媒体文件数组
|
||||
*/
|
||||
static async choose(options = {}) {
|
||||
const {
|
||||
type = MediaType.IMAGE,
|
||||
count = 9,
|
||||
imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp'],
|
||||
videoExtensions = ['mp4', 'mov', '3gp', 'avi', 'rmvb', 'rm', 'flv', 'mkv'],
|
||||
compressed = true,
|
||||
crop = false,
|
||||
videoMaxDuration = 60,
|
||||
camera = 'back'
|
||||
} = options;
|
||||
|
||||
// 根据类型选择不同的媒体
|
||||
if (type === MediaType.IMAGE) {
|
||||
return this.chooseImages({ count, extensions: imageExtensions, compressed, crop, camera });
|
||||
} else if (type === MediaType.VIDEO) {
|
||||
return this.chooseVideos({ count, extensions: videoExtensions, compressed, maxDuration: videoMaxDuration, camera });
|
||||
} else if (type === MediaType.BOTH) {
|
||||
// 如果是两者都选，则先让用户选择类型
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['选择图片', '选择视频'],
|
||||
success: async (res) => {
|
||||
try {
|
||||
if (res.tapIndex === 0) {
|
||||
// 选择图片
|
||||
const images = await this.chooseImages({ count, extensions: imageExtensions, compressed, crop, camera });
|
||||
resolve(images);
|
||||
} else {
|
||||
// 选择视频
|
||||
const videos = await this.chooseVideos({ count, extensions: videoExtensions, compressed, maxDuration: videoMaxDuration, camera });
|
||||
resolve(videos);
|
||||
}
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
throw new Error('不支持的媒体类型');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择图片
|
||||
* @param {Object} options 选择图片的配置项
|
||||
* @returns {Promise<Array>} 返回选择的图片数组
|
||||
*/
|
||||
static chooseImages(options) {
|
||||
const { count = 9, extensions = ['png', 'jpg', 'jpeg', 'gif', 'webp'], compressed = true, crop = false, camera = 'back' } = options;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count,
|
||||
sizeType: compressed ? ['compressed'] : ['original'],
|
||||
sourceType: ['album', 'camera'],
|
||||
extension: extensions,
|
||||
crop: crop ? {
|
||||
quality: 100,
|
||||
width: 300,
|
||||
height: 300,
|
||||
resize: true
|
||||
} : false,
|
||||
camera,
|
||||
success: (res) => {
|
||||
// 处理返回的图片数据，统一格式
|
||||
const images = res.tempFiles.map(file => ({
|
||||
path: file.path,
|
||||
size: file.size,
|
||||
name: this.getFileName(file.path),
|
||||
type: 'image',
|
||||
extension: this.getFileExtension(file.path),
|
||||
createTime: new Date().getTime()
|
||||
}));
|
||||
resolve(images);
|
||||
},
|
||||
fail: (err) => {
|
||||
// 用户取消选择不报错
|
||||
if (err.errMsg.indexOf('cancel') !== -1) {
|
||||
resolve([]);
|
||||
} else {
|
||||
reject(err);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择视频
|
||||
* @param {Object} options 选择视频的配置项
|
||||
* @returns {Promise<Array>} 返回选择的视频数组
|
||||
*/
|
||||
static chooseVideos(options) {
|
||||
const { count = 1, extensions = ['mp4', 'mov', '3gp', 'avi', 'rmvb', 'rm', 'flv', 'mkv'], compressed = true, maxDuration = 60, camera = 'back' } = options;
|
||||
|
||||
// 由于uni.chooseVideo一次只能选择一个视频，如果count>1，需要多次选择
|
||||
if (count <= 1) {
|
||||
return this.chooseSingleVideo({ extensions, compressed, maxDuration, camera });
|
||||
} else {
|
||||
// 提示用户需要多次选择
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `您需要选择${count}个视频，将分${count}次选择`,
|
||||
confirmText: '开始选择',
|
||||
cancelText: '取消',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
const videos = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
// 显示当前选择进度
|
||||
uni.showLoading({
|
||||
title: `正在选择第${i + 1}/${count}个视频`,
|
||||
mask: true
|
||||
});
|
||||
|
||||
// 选择单个视频
|
||||
const videoResult = await this.chooseSingleVideo({ extensions, compressed, maxDuration, camera });
|
||||
|
||||
// 隐藏加载提示
|
||||
uni.hideLoading();
|
||||
|
||||
// 如果用户取消了选择，则结束循环
|
||||
if (videoResult.length === 0) {
|
||||
break;
|
||||
}
|
||||
|
||||
// 添加到结果数组
|
||||
videos.push(...videoResult);
|
||||
|
||||
// 如果还没选完，询问是否继续
|
||||
if (i < count - 1) {
|
||||
const continueRes = await new Promise((resolveDialog) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `已选择${videos.length}个视频，是否继续选择？`,
|
||||
confirmText: '继续',
|
||||
cancelText: '完成',
|
||||
success: (modalRes) => {
|
||||
resolveDialog(modalRes.confirm);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 如果用户选择不继续，则结束循环
|
||||
if (!continueRes) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
resolve(videos);
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
reject(error);
|
||||
}
|
||||
} else {
|
||||
resolve([]);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择单个视频
|
||||
* @param {Object} options 选择视频的配置项
|
||||
* @returns {Promise<Array>} 返回选择的视频数组
|
||||
*/
|
||||
static chooseSingleVideo(options) {
|
||||
const { extensions = ['mp4', 'mov', '3gp', 'avi', 'rmvb', 'rm', 'flv', 'mkv'], compressed = true, maxDuration = 60, camera = 'back' } = options;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.chooseVideo({
|
||||
sourceType: ['album', 'camera'],
|
||||
compressed,
|
||||
maxDuration,
|
||||
camera,
|
||||
extension: extensions,
|
||||
success: (res) => {
|
||||
// 处理返回的视频数据，统一格式
|
||||
const video = {
|
||||
path: res.tempFilePath,
|
||||
size: res.size,
|
||||
duration: res.duration,
|
||||
width: res.width,
|
||||
height: res.height,
|
||||
name: this.getFileName(res.tempFilePath),
|
||||
type: 'video',
|
||||
extension: this.getFileExtension(res.tempFilePath),
|
||||
createTime: new Date().getTime()
|
||||
};
|
||||
resolve([video]);
|
||||
},
|
||||
fail: (err) => {
|
||||
// 用户取消选择不报错
|
||||
if (err.errMsg.indexOf('cancel') !== -1) {
|
||||
resolve([]);
|
||||
} else {
|
||||
reject(err);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件名
|
||||
* @param {string} path 文件路径
|
||||
* @returns {string} 文件名
|
||||
*/
|
||||
static getFileName(path) {
|
||||
if (!path) return '';
|
||||
return path.substring(path.lastIndexOf('/') + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件扩展名
|
||||
* @param {string} path 文件路径
|
||||
* @returns {string} 文件扩展名
|
||||
*/
|
||||
static getFileExtension(path) {
|
||||
if (!path) return '';
|
||||
return path.substring(path.lastIndexOf('.') + 1).toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* 预览媒体文件
|
||||
* @param {string} path 文件路径
|
||||
* @param {string} type 媒体类型，可选值：'image'、'video'，默认根据文件扩展名自动判断
|
||||
*/
|
||||
static preview(path, type) {
|
||||
if (!path) return;
|
||||
|
||||
// 如果未指定类型，则根据文件扩展名判断
|
||||
if (!type) {
|
||||
const extension = this.getFileExtension(path);
|
||||
if (['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(extension)) {
|
||||
type = MediaType.IMAGE;
|
||||
} else if (['mp4', 'mov', '3gp', 'avi', 'rmvb', 'rm', 'flv', 'mkv'].includes(extension)) {
|
||||
type = MediaType.VIDEO;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '不支持的文件类型',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 根据类型预览
|
||||
if (type === MediaType.IMAGE) {
|
||||
uni.previewImage({
|
||||
urls: [path],
|
||||
current: path
|
||||
});
|
||||
} else if (type === MediaType.VIDEO) {
|
||||
// 视频预览
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/video-player?url=${encodeURIComponent(path)}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用示例：
|
||||
*
|
||||
* // 导入
|
||||
* import MediaSelector, { MediaType } from '@/utils/mediaSelector';
|
||||
*
|
||||
* // 选择图片
|
||||
* const images = await MediaSelector.choose({ type: MediaType.IMAGE, count: 9 });
|
||||
* console.log('选择的图片：', images);
|
||||
*
|
||||
* // 选择视频
|
||||
* const videos = await MediaSelector.choose({ type: MediaType.VIDEO, count: 1 });
|
||||
* console.log('选择的视频：', videos);
|
||||
*
|
||||
* // 选择图片或视频（用户可选择）
|
||||
* const media = await MediaSelector.choose({ type: MediaType.BOTH, count: 5 });
|
||||
* console.log('选择的媒体：', media);
|
||||
*
|
||||
* // 预览媒体
|
||||
* if (media.length > 0) {
|
||||
* MediaSelector.preview(media[0].path, media[0].type);
|
||||
* }
|
||||
*/
|
||||
Reference in New Issue
Block a user