更新记录

1.0.16（2026-02-07）

  1. 优化

1.0.15（2026-02-07）

  1. 鸿蒙增加直接拍照或直接录像功能

1.0.14（2026-01-13）

  1. 增加Android底部系统导航栏的适配
  2. 自定义按钮标题
查看更多

平台兼容性

uni-app(3.6.16)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ - - √ √ 5.0 √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

uni-app x(3.6.16)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - 5.0 √ √ -

其他

多语言 暗黑模式 宽屏模式
√ √ √

相册视频选择、相机录像拍照

  • 选择相片/拍照
  • 直接打开系统相册选择相片
  • 直接打开相机拍照
  • 直接打开相机录像

集成步骤

  1. 拷贝demo里的AndroidManifest.xml、Info.plist文件到项目根目录
  2. 集成插件，集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027
  3. uniappX的demo在示例项目的static文件夹下

接口


import {
    UTSImagePicker,
    imagePicker
} from "@/uni_modules/wrs-uts-imagepicker"
  • 选择相片/视频/拍照/录视频

let params = {}
// 最多选择数
params.maxCount = 9
// 最小选择数
// params.minCount = 1
// 是否允许编辑
params.allowCrop = false
// 允许选择原图
params.allowPickingOriginalPhoto = true
params.converHEIC = true

//#ifdef APP-PLUS
// 选择后保存的目录，仅支持Android、iOS
params.savePath = plus.io.convertLocalFileSystemURL("_download/selected_file")
//#endif

switch (this.platform) {
    case 'harmonyos': {
        params.MIMEType = "IMAGE_TYPE" // IMAGE_TYPE、VIDEO_TYPE、IMAGE_VIDEO_TYPE、MOVING_PHOTO_IMAGE_TYPE
    }
    break;
    case 'android': {
        // 0: TYPE_ALL 1: TYPE_IMAGE 2: TYPE_VIDEO 3: TYPE_AUDIO
        params.chooseMode = 0
        // 是否默认选择上次选择的数据
        // params.defaultSelectedBefore = true
        params.style = {
            titleBarStyle: {
                // titleBackgroundColor: "#FFFFFF",
                // titleTextColor: "#000000",
                // titleCancelTextColor: "#53575e",
                // isDisplayTitleBarLine: true
                // titleCancelText: "取消",
                // titleDefaultText: ""
            },
            bottomBarStyle: {
                // bottomNarBarBackgroundColor: "#EEEEEE",
                // bottomPreviewSelectTextColor: "#53575e",
                // bottomPreviewNormalTextColor: "#9b9b9b",
                // bottomEditorTextColor: "#53575e",
                // bottomOriginalTextColor: "#53575e",
                // isCompleteCountTips: false,
                // bottomPreviewSelectText: "预览",
                // bottomEditorText: "编辑",
                // bottomOriginalText: "", 
                // bottomPreviewNormalText: "预览"
            },
            selectMainStyle: {
                // statusBarColor: "#FFFFFF",
                // selectNormalTextColor: "#9b9b9b",
                // selectTextColor: "#FA632D",
                // mainListBackgroundColor: "#FFFFFF",
                selectText: "确定",
                // selectNormalText: "选择",
                // adapterCameraText: "相机",
                // previewSelectText: "预览"
            }
        }

        this.isNavBarVisible = UTSImagePicker.isNavBarVisible()
        if (this.isNavBarVisible) { // 为了适配某些机型uniapp项目会被系统底部导航栏底部挡住问题
            setTimeout(() => {
                // 当选择图片页面显示以后调用隐藏导航栏接口,这里开个定时器大概一秒以后调用隐藏导航栏接口
                UTSImagePicker.showNavBar(false)
            }, 1000);
        }
    }
    break;
    case 'ios': {
        // params.preferredLanguage = "zh-Hant" // zh-Hans、zh-Hant、en、vi、ar、de、es、fr、ja、ko-KP、pt、ru
        // params.doneBtnTitleStr = "确定" 
        params.cancelBtnTitleStr = "取消"
        // params.previewBtnTitleStr = "预览"
        // params.fullImageBtnTitleStr = "原图"
        // params.settingBtnTitleStr = "设置"
        // params.processHintStr = "处理"
        // params.editBtnTitleStr = "编辑"
        // params.editViewCancelBtnTitleStr = "取消"
        //    params.oKButtonTitleColorNormal = "#FF0000"
        // params.oKButtonTitleColorDisabled = "#706d5f"
        // params.naviBgColor = "#FFFFFF"
        // params.naviTitleColor = "#000000"
        // params.barItemTextColor = "#000000"
        // params.iconThemeColor = "#FF0000"
    }
    break;
    default:
        break;
}

imagePicker(params, (resp) => {
    let opt = resp.opt
    switch (opt) {
        case "onSaveFileStart":
            // 如果用户选了多个文件则这里调用多次，一般用来保存大文件时显示loading效果
            this.showMsg("开始拷贝到文件夹")
            break;
        case "onPickFinish":
            // {"fileArray":[{"pixelWidth":1125,"isHidden":false,"mediaSubtypes":4,"pixelHeight":2436,"isFavorite":false,"duration":0,"fullSizeImageOrientation":1,"sourceType":1,"mediaType":1,"filePath":"/var/mobile/Containers/Data/Application/76E50498-1367-4511-AFFD-3742A1A12953/Documents/Pandora/apps/__UNI__AD6F5BE/www/_download/selected_file/IMG_1203.PNG","sourceFilePath":"/var/mobile/Media/DCIM/101APPLE/IMG_1203.PNG","modificationDate":1722302459.893853,"creationDate":1722246676},{"pixelWidth":3024,"isHidden":false,"location":{"coordinate":{"latitude":23.152283333333333,"longitude":113.40131333333333},"speed":0,"horizontalAccuracy":35,"verticalAccuracy":0,"course":205.2164},"mediaSubtypes":8,"pixelHeight":4032,"isFavorite":false,"duration":0,"fullSizeImageOrientation":6,"sourceType":1,"mediaType":1,"filePath":"/var/mobile/Containers/Data/Application/76E50498-1367-4511-AFFD-3742A1A12953/Documents/Pandora/apps/__UNI__AD6F5BE/www/_download/selected_file/IMG_1202.JPG","sourceFilePath":"/var/mobile/Media/DCIM/101APPLE/IMG_1202.JPG","modificationDate":1722246097.482034,"creationDate":1722235070.828}],"opt":"onPickFinish"}
            // 鸿蒙：[{"filePath":"media/Photo/2/IMG_1750815984_001/logo.png","name":"logo.png","path":"/Photo/2/IMG_1750815984_001"},{"filePath":"media/Photo/3/IMG_1750815987_002/logo.png","name":"logo.png","path":"/Photo/3/IMG_1750815987_002"}]
            let fileArrayStr = resp.fileArray
            let fileArray = JSON.parse(fileArrayStr)
            this.imageArray = []
            let length = fileArray.length
            for (let i = 0; i < length; i++) {
                this.imageArray.push(fileArray[i])
            }
            this.showMsg("选择结果:" + JSON.stringify(fileArray))
            break;
        case "onCancel":
            this.showMsg("用户取消了选择")
            break;
        case "onError":
            this.showMsg("出错了:" + JSON.stringify(resp))
            break;
        default:
            break;
    }
})

参数params属性：

  • savePath，仅支持Android、iOS 设置选择后保存的目录

  • maxCount 最多选择数

  • minCount，仅支持Android、iOS 最小选择数

  • allowCrop 是否允许编辑，iOS当maxCount等于1时才生效

  • allowPickingOriginalPhoto 是否允许选择原图

  • allowPickingGif，仅支持Android、iOS 是否允许选择gif

  • isWithSelectVideoImage，仅支持Android、iOS，鸿蒙使用参数MIMEType 是否允许同时选择视频和图片

  • openType 打开类型，取值范围： openGallery：打开相册,显示所有相片和拍照按钮，常用,openGallery暂时不支持uniappX的iOS项目 openSystemGallery： 打开系统相册 openCamera: 打开相机

  • mediaTypes，仅支持鸿蒙 用于打开相机的时候是用于拍照还是录像或者两者都有 ["photo", "video"]

  • converHEIC，仅支持Android、iOS true/false, HEIC图片是否转换为jpg/png

  • maxVideoCount，仅支持Android 最大视频数量

  • minVideoCount，仅支持Android 最小视频数量

  • chooseMode，仅支持Android 选择模式，取值范围： 0: TYPE_ALL 1: TYPE_IMAGE 2: TYPE_VIDEO 3: TYPE_AUDIO

  • defaultSelectedBefore，仅支持Android 是否默认选择上次选择的数据

  • language，仅支持Android 语言，取值范围： -1: SYSTEM_LANGUAGE 0: CHINESE 1: TRADITIONAL_CHINESE 2: ENGLISH 3: KOREA 4: GERMANY 5: FRANCE 6: JAPAN 7: VIETNAM 8: SPANISH 9: PORTUGAL 10: AR 11: RU 12: CS 13: KK

  • isDisplayCamera，仅支持Android 是否显示拍照按钮

  • style，仅支持Android 自定义样式


params.style = {
    titleBarStyle: {
        titleBackgroundColor: "#FFFFFF",
        titleTextColor: "#000000",
        titleCancelTextColor: "#53575e",
        isDisplayTitleBarLine: true,
         titleCancelText: "取消",
         titleDefaultText: ""
    },
    bottomBarStyle: {
        bottomNarBarBackgroundColor: "#EEEEEE",
        bottomPreviewSelectTextColor: "#53575e",
        bottomPreviewNormalTextColor: "#9b9b9b",
        bottomEditorTextColor: "#53575e",
        bottomOriginalTextColor: "#53575e",
        isCompleteCountTips: false,
        bottomPreviewSelectText: "预览",
        bottomEditorText: "编辑",
       bottomOriginalText: "", 
       bottomPreviewNormalText: "预览"
    },
    selectMainStyle: {
        statusBarColor: "#FFFFFF",
        selectNormalTextColor: "#9b9b9b",
        selectTextColor: "#FA632D",
        mainListBackgroundColor: "#FFFFFF",
        selectText: "确定",
        selectNormalText: "选择",
        adapterCameraText: "相机",
        previewSelectText: "预览"
    }
}

  • allowPickingImage，仅支持ios 是否允许选图片

  • allowTakePicture，仅支持ios 是否允许拍照

  • allowPickingVideo，仅支持ios 是否允许选视频

  • allowTakeVideo，仅支持ios 是否允许拍视频

  • allowEditVideo，仅支持ios 是否编辑视频

  • videoMaximumDuration，仅支持ios 视频最大拍摄时间

  • allowPickingMultipleVideo，仅支持ios 是否多选视频

######## 自定义样式颜色属性和文本，仅支持ios

  • oKButtonTitleColorNormal
  • oKButtonTitleColorDisabled
  • naviBgColor
  • naviTitleColor
  • barItemTextColor
  • iconThemeColor
  • doneBtnTitleStr
  • cancelBtnTitleStr
  • previewBtnTitleStr
  • fullImageBtnTitleStr
  • settingBtnTitleStr
  • processHintStr
  • editBtnTitleStr
  • editViewCancelBtnTitleStr

########

  • preferredLanguage，仅支持ios 多语言，取值范围： zh-Hans、zh-Hant、en、vi、ar、de、es、fr、ja、ko-KP、pt、ru

  • needCircleCrop，仅支持ios 是否需要圆形裁剪框

  • scaleAspectFillCrop，仅支持ios 是否图片等比缩放填充

  • mediaTypes，仅支持ios Array类型 打开相机或相册的媒体类型，常用于筛选相册图片或录像,常用的类型有： public.image public.movie public.jpeg public.png public.video 等等

  • videoMaximumDuration，仅支持ios 录像最长时间，单位秒

  • cameraFlashMode，仅支持ios 闪光灯模式：-1: 关闭 0:自动 1: 打开

  • cameraDevice，仅支持ios 前后摄像头，0：后摄像头 1:前摄像头

  • MIMEType，仅支持鸿蒙 IMAGE_TYPE、VIDEO_TYPE、IMAGE_VIDEO_TYPE、MOVING_PHOTO_IMAGE_TYPE

android底部系统导航栏挡住问题

方案：

  • 如果系统导航栏已经显示的话，调用选择接口后，开启定时器判断导航栏是否有显示，如果显示的话就隐藏，一直到选择结束，具体例子可以参考demo

  • 判断是否系统导航栏是否有显示


let isNavBarVisible = UTSImagePicker.isNavBarVisible()
  • 显示/隐藏系统底部导航栏

UTSImagePicker.showNavBar(false)

隐私、权限声明

1. 本插件需要申请的系统权限列表：

相册、相机、定位

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...