更新记录

1.0.0(2024-05-23)

读取本地相册图片视频音频,可自定义UI界面


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0,Android:4.4,iOS:9 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

读取本地相册图片视频音频,可自定义UI界面

  1. 获取相册图片
  2. 获取相册视频
  3. 获取音频文件

支持定制,加QQ

常用文件处理插件

  1. 文件预览https://ext.dcloud.net.cn/plugin?id=17167

    • 支持pdf/word/excel/ppt/图片,支持本地或在线文件
  2. 文件增删查改copy遍历https://ext.dcloud.net.cn/plugin?id=14130

    • 文件读写、copy、move、遍历文件夹、是否存在、删除、重命名......等等
  3. 读取常用文件目录(包含U盘)https://ext.dcloud.net.cn/plugin?id=15243

    • uniapp(_www、_doc、_download)
    • Android(数据目录、文件目录、缓存目录、环境environment目录、SDCard目录、外接U盘)
    • iOS(documentDirectory、temporaryDirectory、libraryDirectory、cachesDirectory)
    • 从U盘读取或保存文件
  4. 读取本地相册图片视频音频,可自定义UI界面-新版https://ext.dcloud.net.cn/plugin?id=18288

    • 获取相册图片、视频、音频文件
    • 常用于自定义相册UI

不熟悉插件集成步骤请参考https://www.jianshu.com/p/c1615a7880a7

配置权限

android:


"<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",

ios:


"NSPhotoLibraryUsageDescription" : "访问相册需要你的授权",
"NSPhotoLibraryAddUsageDescription" : "访问相册需要你的授权",

导入变量


import {
    UTSGetFiles
} from "@/uni_modules/wrs-uts-getfiles"

获取相册图片数据


    var params = {}
    params.page = 1
    params.pageSize = 50

    if (this.isAndroid) {
        if (this.startTime && this.endTime) {
            var start_time = this.getTimeStamp(this.startTime)
            var end_time = this.getTimeStamp(this.endTime)

            params.projection = ["_data"] // 要返回的属性数组
            // params.selection = "date_added >= " + start_time + " and date_added <= " + end_time
            params.selection =
                "date_added >= ? and date_added <= ?" // 筛选条件,时间传的是时间戳,精确到秒,参数不传到话会返回所有图片数据
            params.selectionArgs = [start_time + "", end_time + ""] // 筛选条件里?代表的值
            params.sortOrder = "date_added DESC" // 排序
        }

} else {
    if (this.startTime && this.endTime) {
        var start_time = this.getTimeStamp(this.startTime)
        var end_time = this.getTimeStamp(this.endTime)
        params.predicate = {
            format: "creationDate >= %@ and creationDate <= %@",
            argumentArray: [{
                    type: "time", // 参数类型
                    value: start_time // 时间格式:yyyy-MM-dd HH:mm:ss
                },
                {
                    type: "time",
                    value: end_time
                }
            ]
        }
        params.sortDescriptors= [ // 排序
            {
                key: "creationDate",
                ascending: false
            }
        ]
    }
}
UTSGetFiles.getPhotos(params, (resp) => {
    console.log(JSON.stringify(resp))
    // android图片模型
    // {
    //  "is_pending": 0,
    //  "primary_directory": "Pictures",
    //  "relative_path": "Pictures/WeiXin/",
    //  "is_trashed": 0,
    //  "group_id": 1828545592,
    //  "height": 1920,
    //  "date_modified": 1692360447,
    //  "width": 1080,
    //  "date_added": 1692360446,
    //  "_size": 1104141,
    //  "secondary_directory": "WeiXin",
    //  "title": "wx_camera_1692360446825",
    //  "_id": 2906,
    //  "volume_name": "external_primary",
    //  "_display_name": "wx_camera_1692360446825.jpg",
    //  "bucket_display_name": "WeiXin",
    //  "is_drm": 0,
    //  "bucket_id": "-643270046",
    //  "mime_type": "image/jpeg",
    //  "owner_package_name": "com.tencent.mm",
    //  "_data": "/storage/emulated/0/Pictures/WeiXin/wx_camera_1692360446825.jpg"
    // }

    // ios模型
    // {
    //  "originalFilename": "IMG_1006.JPG",
    //  "path": "file:///var/mobile/Media/DCIM/101APPLE/IMG_1006.JPG"
    // }
    this.imageArray.length = 0
    this.imageArray = []
    var fileArray = resp.fileArray
    if (fileArray && fileArray.length > 0) {
        this.imageArray.length = 0
        this.imageArray = []
        for (var i = 0; i < fileArray.length; i++) {
            var model = fileArray[i]
            if (this.isAndroid) {
                var _data = model._data
                this.imageArray.push({
                    src: "file://" + _data // image显示本地图片需要使用file协议
                })
            } else {
                var path = model.path
                this.imageArray.push({
                    src: path // image显示本地图片需要使用file协议
                })
            }
        }
    }
    // console.log(JSON.stringify(this.imageArray))
})

获取视频文件


// params参数和返回模型参考【获取相册图片数据】的参数
            var params = {}
params.page = 1
params.pageSize = 200

if (this.isAndroid) {
    if (this.startTime && this.endTime) {
        var start_time = this.getTimeStamp(this.startTime)
        var end_time = this.getTimeStamp(this.endTime)

        params.projection = ["_data"] // 要返回的属性数组
        // params.selection = "date_added >= " + start_time + " and date_added <= " + end_time
        params.selection =
            "date_added >= ? and date_added <= ?" // 筛选条件,时间传的是时间戳,精确到秒,参数不传到话会返回所有图片数据
        params.selectionArgs = [start_time + "", end_time + ""] // 筛选条件里?代表的值
        params.sortOrder = "date_added DESC" // 排序
    }

} else {
    if (this.startTime && this.endTime) {
        var start_time = this.getTimeStamp(this.startTime)
        var end_time = this.getTimeStamp(this.endTime)
        params.predicate = {
            format: "creationDate >= %@ and creationDate <= %@",
            argumentArray: [{
                    type: "time", // 参数类型
                    value: start_time // 时间格式:yyyy-MM-dd HH:mm:ss
                },
                {
                    type: "time",
                    value: end_time
                }
            ]

        }
        params.sortDescriptors = [ // 排序
            {
                key: "creationDate",
                ascending: false
            }
        ]
    }
}
UTSGetFiles.getVideos(params, (resp) => {

    // android图片模型
    // {
    //  "is_pending": 0,
    //  "primary_directory": "Pictures",
    //  "relative_path": "Pictures/WeiXin/",
    //  "is_trashed": 0,
    //  "group_id": 1828545592,
    //  "height": 1920,
    //  "date_modified": 1692360447,
    //  "width": 1080,
    //  "date_added": 1692360446,
    //  "_size": 1104141,
    //  "secondary_directory": "WeiXin",
    //  "title": "wx_camera_1692360446825",
    //  "_id": 2906,
    //  "volume_name": "external_primary",
    //  "_display_name": "wx_camera_1692360446825.jpg",
    //  "bucket_display_name": "WeiXin",
    //  "is_drm": 0,
    //  "bucket_id": "-643270046",
    //  "mime_type": "image/jpeg",
    //  "owner_package_name": "com.tencent.mm",
    //  "_data": "/storage/emulated/0/Pictures/WeiXin/wx_camera_1692360446825.jpg"
    // }

    // ios模型
    // {
    //  "originalFilename": "IMG_1006.JPG",
    //  "path": "file:///var/mobile/Media/DCIM/101APPLE/IMG_1006.JPG"
    // } 
    this.imageArray.length = 0
    this.imageArray = []
    var fileArray = resp.fileArray
    if (fileArray && fileArray.length > 0) {
        console.log(JSON.stringify(fileArray))
        this.imageArray.length = 0
        this.imageArray = []
        for (var i = 0; i < fileArray.length; i++) {
            var model = fileArray[i]
            var src = ""
            if (this.isAndroid) {
                var _data = model._data
                // // image显示本地图片需要使用file协议
                src = "file://" + _data
            } else {
                src = model.path
            }
            src = src.toLowerCase()
            if (src.endWith(".png") || src.endWith(".jpg") || src.endWith(".jpeg")) {
                this.imageArray.push({
                    src: src // image显示本地图片需要使用file协议
                })
            }
        }
    }

})

要显示视频缩略图的话需要使用组件,即:


<view v-for="(item, index) in videoArray" class="file">
    <wrs-image  :videoId="item.videoId" style="width: 50px; height: 50px; background-color: #eeeeee;"
        :mode="mode"></wrs-image>
</view>

videoId属性值得是Android数据模型的_id、iOS数据模型的localIdentifier,即:


if (this.isAndroid) {
    model.videoId = model._id + ""
} else {
    model.videoId = model.localIdentifier + ""
}

获取音频文件


var params = {}
// params参数和返回模型参考【获取相册图片数据】的参数
UTSGetFiles.getAudios(params, (resp) => {
    var fileArray = resp.fileArray
    if (fileArray && fileArray.length > 0) {
        this.imageArray.length = 0
        this.imageArray = []
        for (var i = 0; i < fileArray.length; i++) {
            var model = fileArray[i]
            if(this.isAndroid) {
                var _data = model._data
                this.imageArray.push({
                    src: "file://" + _data // image显示本地图片需要使用file协议
                })
            } else {
                var path = model.path
                this.imageArray.push({
                    src: path // image显示本地图片需要使用file协议
                })
            }
        }
    }
    // console.log(JSON.stringify(resp))
})

获取访问相册权限(仅支持iOS)

如果要在页面上使用显示图片的话,页面需要用nvue


    UTSGetFiles.requestAuthorization((resp) => {
        // 0: PHAuthorizationStatusNotDetermined
        // 1: PHAuthorizationStatusRestricted
        // 2: PHAuthorizationStatusDenied
        // 3: PHAuthorizationStatusAuthorized
        // 4: PHAuthorizationStatusLimited API_AVAILABLE(ios(14))
        let status = resp.status

    console.log(JSON.stringify(resp))
})

返回的数据模型(如需更多字段联系QQ)

ios:


{
    "fileArray": [{
        "pixelWidth": 1575,
        "isHidden": false,
        "localIdentifier": "D150757D-6B19-4998-9C25-3B5B4CC5E8DC/L0/001",
        "pixelHeight": 2100,
        "isFavorite": false,
        "duration": 0,
        "mediaType": 1,
        "path": "file:///var/mobile/Media/PhotoData/Mutations/DCIM/101APPLE/IMG_1027/Adjustments/FullSizeRender.jpg"
    }, {
        "pixelWidth": 1575,
        "isHidden": false,
        "localIdentifier": "23400FEE-0965-4479-9C1B-CD639CB122A6/L0/001",
        "pixelHeight": 2100,
        "isFavorite": false,
        "duration": 0,
        "mediaType": 1,
        "path": "file:///var/mobile/Media/PhotoData/Mutations/DCIM/101APPLE/IMG_1028/Adjustments/FullSizeRender.jpg"
    }, {
        "pixelWidth": 1575,
        "isHidden": false,
        "localIdentifier": "80DD4D31-4E01-4A43-A87D-FCD4D45F0110/L0/001",
        "pixelHeight": 2100,
        "isFavorite": false,
        "duration": 0,
        "mediaType": 1,
        "path": "file:///var/mobile/Media/PhotoData/Mutations/DCIM/101APPLE/IMG_1029/Adjustments/FullSizeRender.jpg"
    }, {
        "pixelWidth": 1575,
        "isHidden": false,
        "localIdentifier": "76FC3185-E34D-49E5-A283-372AD0B9172B/L0/001",
        "pixelHeight": 2100,
        "isFavorite": false,
        "duration": 0,
        "mediaType": 1,
        "path": "file:///var/mobile/Media/PhotoData/Mutations/DCIM/101APPLE/IMG_1030/Adjustments/FullSizeRender.jpg"
    }, {
        "pixelWidth": 1575,
        "isHidden": false,
        "localIdentifier": "B6334694-F4C4-4CEB-9AF8-0282D10DE45F/L0/001",
        "pixelHeight": 2100,
        "isFavorite": false,
        "duration": 0,
        "mediaType": 1,
        "path": "file:///var/mobile/Media/PhotoData/Mutations/DCIM/101APPLE/IMG_1031/Adjustments/FullSizeRender.jpg"
    }],
    "totalCount": 5
}

android:


{
    "fileArray": [{
        "is_pending": 0,
        "title": "IMG_20231214_102405_edit_1190978885987016",
        "primary_directory": "DCIM",
        "mime_type": "image/jpeg",
        "relative_path": "DCIM/Camera/",
        "is_drm": 0,
        "date_added": 1702520666,
        "is_trashed": 0,
        "group_id": 1023065387,
        "height": 3648,
        "date_modified": 1702520666,
        "width": 2736,
        "bucket_display_name": "Camera",
        "bucket_id": "-1739773001",
        "secondary_directory": "Camera",
        "_id": 6026,
        "description": "hdrpl",
        "volume_name": "external_primary",
        "_size": 2526131,
        "orientation": 0,
        "datetaken": 1713598594,
        "mini_thumb_magic": 0,
        "_display_name": "IMG_20231214_102405_edit_1190978885987016.jpg",
        "_data": "/storage/emulated/0/DCIM/Camera/IMG_20231214_102405_edit_1190978885987016.jpg"
    }, {
        "is_pending": 0,
        "title": "IMG_20231214_102339_edit_1190954225183894",
        "primary_directory": "DCIM",
        "mime_type": "image/jpeg",
        "relative_path": "DCIM/Camera/",
        "is_drm": 0,
        "date_added": 1702520641,
        "is_trashed": 0,
        "group_id": -467912425,
        "height": 3648,
        "date_modified": 1702520642,
        "width": 2736,
        "bucket_display_name": "Camera",
        "bucket_id": "-1739773001",
        "secondary_directory": "Camera",
        "_id": 6024,
        "description": "qrf",
        "volume_name": "external_primary",
        "_size": 2054439,
        "orientation": 0,
        "datetaken": 1713571550,
        "mini_thumb_magic": 0,
        "_display_name": "IMG_20231214_102339_edit_1190954225183894.jpg",
        "_data": "/storage/emulated/0/DCIM/Camera/IMG_20231214_102339_edit_1190954225183894.jpg"
    }],
    "totalCount": 5
}

如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!

隐私、权限声明

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

android: 读写权限 ios: 相册权限

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

插件不采集任何数据

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

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问