|
@@ -0,0 +1,144 @@
|
|
|
+# 相册图片视频选择器功能介绍
|
|
|
+1.支持uniapp和uniappx
|
|
|
+2.支持打开系统相册选择相片
|
|
|
+3.支持多选和单选
|
|
|
+4.支持设置多种语言
|
|
|
+5.支持自定义界面主题样式
|
|
|
+6.支持媒体文件类型选择 0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频)
|
|
|
+7.支持媒体文件预览
|
|
|
+8.支持设置开启和关闭原图功能
|
|
|
+### 注意:集成完成后需要云打包或自定义基座才能生效。
|
|
|
+### 相册图片视频选择器集成方法
|
|
|
+首先AndroidManifest.xml里配置示例文件里所需的权限也可直接复制示列里的AndroidManifest.xml文件到项目根目录
|
|
|
+- 参数说明
|
|
|
+
|
|
|
+ | 参数名称 | 类型 | 默认值 | 描述 |
|
|
|
+ | ----------- | ----- | ----- | ---------------- |
|
|
|
+ | MediaType | number | 1 | 设置选择类型 0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) |
|
|
|
+ | Single | number | 2 | 设置单选或多选, 1:单选,2:多选 |
|
|
|
+ | maxNum | number | 9 | 设置最大选中数,不传默认为9 仅多选时生效 |
|
|
|
+ | minNum | number | 0 | 最少选中数,不传为默认为0 仅多选时生效 |
|
|
|
+ | isOriginal | boolean | false | 是否开启原图功能 |
|
|
|
+ | isDisplayCamera | boolean | true | 是否显示拍摄按钮 |
|
|
|
+ | theme | UTSJSONObject | 黑色主题 | 主题界面样式设置,不传为默认样式 |
|
|
|
+ | Language | number | 0 | 语言设置:0:简体中文,1:繁体,2:英语,3:韩语,4:德语,5:法语,6:日语,7:越语,8:西班牙语,9:葡萄牙语,10:阿拉伯语,11:俄语,12:捷克,13:哈萨克斯坦 |
|
|
|
+## uni-appx项目中集成调用示例:
|
|
|
+1.接口引入
|
|
|
+```js
|
|
|
+import { RHFselcet } from '@/uni_modules/fz-media-selcet';
|
|
|
+```
|
|
|
+2.调用示例
|
|
|
+```js
|
|
|
+let parameter: UTSJSONObject ={
|
|
|
+ MediaType:2,//设置选择类型 0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
|
|
|
+ Single:2,//设置单选或多选, 1为单选,2为多选,不传默认为多选
|
|
|
+ maxNum:6,//设置最大选中数,不传默认为9 仅多选时生效
|
|
|
+ minNum:0,//最少选中数,不传为默认为0 仅多选时生效
|
|
|
+ isOriginal:false, //是否开启原图功能,不传默认为false
|
|
|
+ isDisplayCamera:true,//是否显示拍摄按钮,不传默认为true
|
|
|
+//语言设置, 0:简体中文,1:繁体,2:英语,3:韩语,4:德语,5:法语,6:日语,7:越语,8:西班牙语,9:葡萄牙语,10:阿拉伯语,11:俄语,12:捷克,13:哈萨克斯坦,不传默认为0
|
|
|
+ Language:2,
|
|
|
+ //主题界面样式设置,不传为默认样式
|
|
|
+ theme:{
|
|
|
+ titleBarStyle:{
|
|
|
+ TitleBackgroundColor:'#20a0ff'
|
|
|
+ },
|
|
|
+ bottomNavBarStyle:{
|
|
|
+ PreviewNormalTextColor:'#20a0ff',
|
|
|
+ PreviewSelectTextColor:'#20a0ff',
|
|
|
+ BarBackgroundColor:'#FFFFFF',
|
|
|
+ EditorTextColor:'#20a0ff',
|
|
|
+ OriginalTextColor:'#20a0ff',
|
|
|
+ },
|
|
|
+ selectMainStyle:{
|
|
|
+ NumberStyle:true, //选中样式是否为数字,不传默认显示勾选样式
|
|
|
+ isbtn:true, //完成按钮是否显示背景颜色
|
|
|
+ //如需修改按钮颜色需要在res/values/colors.xml里修改btn_primary和btn_hover的颜色值和按下后的颜色值
|
|
|
+ SelectTextColor:'#ffffff',//选择结果文字颜色
|
|
|
+ // SelectText:'%1$d/%2$d 完成',
|
|
|
+ SelectText:'使用(%1$d)',//选择结果要显示的文字,不传默认显示:已完成
|
|
|
+ StatusBarColor:'#20a0ff',
|
|
|
+ OriginalTextColor:'#20a0ff',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+//打开相册或视频
|
|
|
+ RHFselcet.getPicture( parameter, (data) => {
|
|
|
+ // console.log(data["mediaArray"])
|
|
|
+ let arrData = data["mediaArray"]
|
|
|
+ let jsonData = JSON.stringify(arrData)
|
|
|
+ console.log(jsonData)
|
|
|
+//回调结果:[{"mimeType":"video/mp4","num":1,"Pathurl":"/storage/emulated/0/DCIM/Camera/lv_0_20241025172529.mp4","height":1920,"fiename":"lv_0_20241025172529.mp4","path":"content://media/external/video/media/427606","Pathid":427606,"duration":16393,"size":20002573,"FolderName":"Camera","dateAddedTime":1729848339,"width":1080},{"mimeType":"video/mp4","num":2,"Pathurl":"/storage/emulated/0/DCIM/Camera/video_20241025_170438.mp4","height":1920,"fiename":"video_20241025_170438.mp4","path":"content://media/external/video/media/427604","Pathid":427604,"duration":16331,"size":35778914,"FolderName":"Camera","dateAddedTime":1729847078,"width":1080}]
|
|
|
+ let DatalArray = JSON.parseArray(jsonData)
|
|
|
+ console.log(DatalArray)
|
|
|
+});
|
|
|
+//打开系统相册或视频进行选择
|
|
|
+ RHFselcet.getSysAlbum({
|
|
|
+ //设置选择类型 0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
|
|
|
+ MediaType:2,
|
|
|
+ //设置选择模式 1为单选,2为多选,不传默认为2多选
|
|
|
+ Single:1}, (data) => {
|
|
|
+ console.log(data["mediaArray"])
|
|
|
+ let ArrayData = data["mediaArray"]
|
|
|
+ let resData = JSON.stringify(ArrayData)
|
|
|
+ console.log(resData)
|
|
|
+});
|
|
|
+```
|
|
|
+## uni-app项目中集成调用示例:
|
|
|
+1.接口引入
|
|
|
+```js
|
|
|
+import { RHFselcet } from '@/uni_modules/fz-media-selcet';
|
|
|
+```
|
|
|
+2.调用方法
|
|
|
+```js
|
|
|
+let parameter ={
|
|
|
+ MediaType:2,//设置选择类型 0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
|
|
|
+ Single:2,//设置单选或多选, 1为单选,2为多选,不传默认为多选
|
|
|
+ maxNum:6,//设置最大选中数,不传默认为9 仅多选时生效
|
|
|
+ minNum:0,//最少选中数,不传为默认为0 仅多选时生效
|
|
|
+ isOriginal:false, //是否开启原图功能,不传默认为false
|
|
|
+ isDisplayCamera:true,//是否显示拍摄按钮,不传默认为true
|
|
|
+ //语言设置, 0:简体中文,1:繁体,2:英语,3:韩语,4:德语,5:法语,6:日语,7:越语,8:西班牙语,9:葡萄牙语,10:阿拉伯语,11:俄语,12:捷克,13:哈萨克斯坦,不传默认为0
|
|
|
+ Language:2,
|
|
|
+ //主题界面样式设置,不传为默认样式
|
|
|
+ theme:{
|
|
|
+ titleBarStyle:{
|
|
|
+ TitleBackgroundColor:'#20a0ff'
|
|
|
+ },
|
|
|
+ bottomNavBarStyle:{
|
|
|
+ PreviewNormalTextColor:'#20a0ff',
|
|
|
+ PreviewSelectTextColor:'#20a0ff',
|
|
|
+ BarBackgroundColor:'#FFFFFF',
|
|
|
+ EditorTextColor:'#20a0ff',
|
|
|
+ OriginalTextColor:'#20a0ff',
|
|
|
+ },
|
|
|
+ selectMainStyle:{
|
|
|
+ NumberStyle:true, //选中样式是否为数字,不传默认显示勾选样式
|
|
|
+ isbtn:true, //完成按钮是否为显示背景,不传为默认不显示按钮背景
|
|
|
+ //如需修改按钮颜色需要在res/values/colors.xml里修改btn_primary和btn_hover的颜色值和按下后的颜色值
|
|
|
+ SelectTextColor:'#ffffff',//选择结果文字颜色
|
|
|
+ // SelectText:'%1$d/%2$d 完成',
|
|
|
+ SelectText:'使用(%1$d)',//选择结果要显示的文字,不传默认显示:已完成
|
|
|
+ StatusBarColor:'#20a0ff',
|
|
|
+ OriginalTextColor:'#20a0ff',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ RHFselcet.getPicture( parameter, (data) => {
|
|
|
+ let arrData = data.mediaArray
|
|
|
+ let jsonData = JSON.stringify(arrData)
|
|
|
+ console.log(jsonData)
|
|
|
+ //回调结果:[{"mimeType":"video/mp4","num":1,"Pathurl":"/storage/emulated/0/DCIM/Camera/lv_0_20241025172529.mp4","height":1920,"fiename":"lv_0_20241025172529.mp4","path":"content://media/external/video/media/427606","Pathid":427606,"duration":16393,"size":20002573,"FolderName":"Camera","dateAddedTime":1729848339,"width":1080},{"mimeType":"video/mp4","num":2,"Pathurl":"/storage/emulated/0/DCIM/Camera/video_20241025_170438.mp4","height":1920,"fiename":"video_20241025_170438.mp4","path":"content://media/external/video/media/427604","Pathid":427604,"duration":16331,"size":35778914,"FolderName":"Camera","dateAddedTime":1729847078,"width":1080}]
|
|
|
+});
|
|
|
+//打开系统相册或视频进行选择
|
|
|
+ RHFselcet.getSysAlbum({
|
|
|
+ //设置选择类型 0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
|
|
|
+ MediaType:2,
|
|
|
+ //设置选择模式 1为单选,2为多选,不传默认为2多选
|
|
|
+ Single:1}, (data) => {
|
|
|
+ let ArrayData = data.mediaArray
|
|
|
+ let resData = JSON.stringify(ArrayData)
|
|
|
+ console.log(resData)
|
|
|
+});
|
|
|
+```
|