uniapp选择相册

原创已于 2025-07-01 21:38:59 修改 · 963 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #选择相册 #相册 #uniapp选择相册

于 2025-07-01 21:30:09 首次发布

uniapp 专栏收录该内容

8 篇文章

订阅专栏

在这里插入图片描述

概述

一款针对Android平台下的图片选择器，支持从相册获取图片、视频、音频&拍照，支持裁剪(单图or多图裁剪)、压缩、主题自定义配置等功能，支持动态获取权限&适配Android 5.0+系统的开源图片选择框架。
支持Uniapp和Uniapp X下的Vue2、VUe3编译，支持所有Android主流操作系统，兼容行可靠稳定

功能说明

下载源码

一. 参数说明

参数	默认值	说明
selectMimeType	0	全部0 图片1 视频1 硬盘3
language	0	系统默认 -1; 简体中文 0; 繁体 1; 英语 2; 韩语 3; 德语 4; 法语 5; 日语 6; 越语 7; 西班牙语 8; 葡萄牙语 9; 阿拉伯语 10; 俄语 11; 捷克 12; 哈萨克斯坦 13;
isCompress	true	是否压缩
isCrop	false	是否剪切
isCameraIntercept	true	是否拦截相机按钮
isCameraForegroundService	true	是否在前台运行
isDisplayCamera	true	是否显示相机
isPageStrategy	true	是否开启分页策略
maxSelectNum	9	最大选择数量
minSelectNum	0	最小选择数量
isVideoPauseResumePlay	true	视频支持暂停与播放
isQuickCapture	true	使用系统摄像机录制后，是否支持使用系统播放器立即播放视频
isPreviewAudio	true	是否支持音频预览
isPreviewImage	true	是否支持预览图片
isPreviewVideo	true	是否支持预览视频
isPreviewFullScreenMode	true	是否支持全屏预览
isEmptyResultReturn	true	是否支持未选择返回
isWithSelectVideoImage	true	是否支持视频图片同选
isSelectZoomAnim	true	选择缩略图缩放效果
isOpenClickSound	true	是否开启点击音效
isCameraAroundState	true	是否开启相机前后切换
isCameraRotateImage	true	拍照是否纠正旋转图片
isGif	true	是否显示gif文件
isWebp	true	是否显示webp文件
isBmp	true	是否显示bmp文件
isMaxSelectEnabledMask	true	达到最大选择数是否开启禁选蒙层
isSyncCover	true	isPageModel模式下是否强制同步封面，默认false
isAutomaticTitleRecyclerTop	true	点击相册标题是否快速回到第一项
isAutoVideoPlay	true	预览视频是否自动播放
isLoopAutoVideoPlay	true	预览视频是否循环播放
isFilterSizeDuration	true	是否过滤图片或音视频大小时长为0的资源
isFastSlidingSelect	true	是否快速滑动选择
isDirectReturnSingle	true	是否直接返回单选
isPageSyncAlbumCount	true	分页模式下设置过滤条件后是否同步专辑下资源的数量
isUseSystemVideoPlayer	true	是否使用系统自带的视频播放器

二. 返回数据说明

返回数据	数据类型	说明
compressed	boolean	是否压缩
compressPath	srtring	压缩路径；设置了isCompress;时返回；
fileName	srtring	文件名
maxSelectEnabledMask	boolean	是否有最大数量限制
num	int	文件数量
bucketId	int
mimeType	srtring	文件类型
duration	int	文件时长
cropResultAspectRatio	int	剪切宽高比
path	srtring	原图path，但在Android Q版本上返回的是content:// Uri类型
checked	boolean	是否选中
realPath	srtring	绝对路径
id	int
toSandboxPath	boolean	是否使用自定义输出路径
sandboxPath	srtring	自定义输出路径
chooseModel	int
width	int	宽度
height	int	高度
original	boolean	是否开启原图
availablePath	srtring
cut	boolean	是否剪切
cutPath	srtring	裁剪后path，设置了isCrop返回
cropImageWidth	int	剪切宽度
cropImageHeight	int	剪切高度
parentFolderName	string
size	int	文件大小
cropOffsetX	int	图片X轴偏移量
cropOffsetY	int	图片Y轴偏移量
galleryEnabledMask	boolean
editorImage	boolean	是否编辑
cameraSource	boolean	是否原图
position	int	位置
dateAddedTime	date	文件添加时间

三.注意事项

从应用市场下载插件导入自己项目后，要先制作自定义插件后，才可以运行使用

插件需在 Android 5.0 版本及以上方可正常使用

尽量使用 HBuilderX 4.0+ 以上的最新版本，以便更好在uni-app和uni-app x中使用uts插件

2.完整代码示例

<template>
	<view>
		<button @click="openPicture()">打开相册</button>
		<uni-grid :column="4" :highlight="true">
			<uni-grid-item v-for="(result, index) in resultList" :index="index" :key="index">
				<view style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
				    <image :src="result.path" mode="aspectFit" :style="{'width': imageSize + 'px', 'height': imageSize + 'px'}"></image>
				</view>

			</uni-grid-item>
		</uni-grid>
		
		<view style="margin: 10px;"> 返回值：</view>
		<scroll-view scroll-x="true" style="margin:20px; 0px ">
			<y-json-view :json="resultList" closed />
		</scroll-view>
	</view>
</template>

<script>
	import {open} from '@/uni_modules/pic-selector'
	const modal = uni.requireNativePlugin('modal');
	export default {
		data() {
			return {
				imageSize:uni.getSystemInfoSync().windowWidth/4-10,
				resultList:[
					// {
					//     "compressed": true,//是否压缩
					//     "compressPath": "",//压缩路径；设置了isCompress;时返回；
					//     "fileName": "",//文件名
					//     "maxSelectEnabledMask": false,
					//     "num": 1,//文件数量
					//     "bucketId": -643270046,
					//     "mimeType": "image/jpeg",//文件类型
					//     "duration": 0,//文件时长
					//     "cropResultAspectRatio": 1,
					//     "path": "",//原图path，但在Android Q版本上返回的是content:// Uri类型
					//     "checked": false,
					//     "realPath": "",//绝对路径
					//     "id": 13043,
					//     "toSandboxPath": true,//是否使用自定义输出路径
					//     "sandboxPath": "",//自定义输出路径
					//     "chooseModel": 0,
					//     "width": 1134,//宽度
					//     "height": 1780,//高度
					//     "original": false,//是否开启原图
					//     "availablePath": "",
					//     "cut": true,//是否剪切
					//     "cutPath": "",//裁剪后path，设置了isCrop返回
					//     "cropImageWidth": 567,//剪切宽度
					//     "cropImageHeight": 567,//剪切高度
					//     "parentFolderName": "WeiXin",
					//     "size": 392774,//文件大小
					//     "cropOffsetX": 0,//图片X轴偏移量
					//     "cropOffsetY": 162,//图片Y轴偏移量
					//     "galleryEnabledMask": false,
					//     "editorImage": false,
					//     "cameraSource": false,
					//     "position": 1,
					//     "dateAddedTime": 1749993134
					// }
				]
			}
		},
		methods: {
			openPicture(){
				let _this = this
				let params = {
					selectMimeType:0,//全部0 图片1 视频1 硬盘3
					language:0, //system Language -1; 简体中文  0; 繁体 1; 英语 2;  韩语 3; 德语 4; 法语 5; 日语 6; 越语 7;  西班牙语 8; 葡萄牙语 9; 阿拉伯语 10; 俄语 11; 捷克 12; 哈萨克斯坦 13;
					isCompress:true,//是否压缩
					isCrop:false,//是否剪切
					isCameraIntercept :true,//是否拦截相机按钮
					isCameraForegroundService:true,//是否在前台运行
					isDisplayCamera:true,//是否显示相机
					isPageStrategy:true,//是否开启分页策略
					maxSelectNum:99,//最大选择数量
					minSelectNum:0,//最小选择数量
					isVideoPauseResumePlay:true,//视频支持暂停与播放
					isQuickCapture:true,//使用系统摄像机录制后，是否支持使用系统播放器立即播放视频
					isPreviewAudio:true,//是否支持音频预览
					isPreviewImage:true,//是否支持预览图片
					isPreviewVideo:true,//是否支持预览视频
					isPreviewFullScreenMode:true,//是否支持全屏预览
					isEmptyResultReturn:true,//是否支持未选择返回
					isWithSelectVideoImage:true,//是否支持视频图片同选
					isSelectZoomAnim:true, //选择缩略图缩放效果
					isOpenClickSound:true,//是否开启点击音效
					isCameraAroundState:true,//是否开启相机前后切换
					isCameraRotateImage:true,//拍照是否纠正旋转图片
					isGif:true,//是否显示gif文件
					isWebp:true, //是否显示webp文件
					isBmp:true,//是否显示bmp文件
					isMaxSelectEnabledMask:true,//达到最大选择数是否开启禁选蒙层
					isSyncCover:true, //isPageModel模式下是否强制同步封面，默认false
					isAutomaticTitleRecyclerTop:true,//点击相册标题是否快速回到第一项
					isAutoVideoPlay:true,//预览视频是否自动播放
					isLoopAutoVideoPlay:true,//预览视频是否循环播放
					isFilterSizeDuration:true,//是否过滤图片或音视频大小时长为0的资源
					isFastSlidingSelect:true,//是否快速滑动选择
					isDirectReturnSingle:true,//是否直接返回单选
					isPageSyncAlbumCount:true,//分页模式下设置过滤条件后是否同步专辑下资源的数量
					isUseSystemVideoPlayer:true,//是否使用系统自带的视频播放器
				}
				open(params,{
					onResult(result){
						if(result){
							_this.resultList = JSON.parse(result)
							console.log('onResult--->>',result)
							modal.toast({ message: _this.resultList, duration: 1.5 });
						}
					},
					onCancel(){
						console.log('onCancel--->>',result)
					}
				})
			}
		}
	}
</script>

<style>
</style>