更新记录
1.0.0(2024-05-23)
读取本地相册图片视频音频,可自定义UI界面
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.0,Android:4.4,iOS:9,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
读取本地相册图片视频音频,可自定义UI界面
- 获取相册图片
- 获取相册视频
- 获取音频文件
常用文件处理插件
-
文件预览https://ext.dcloud.net.cn/plugin?id=17167
- 支持pdf/word/excel/ppt/图片,支持本地或在线文件
-
文件增删查改copy遍历https://ext.dcloud.net.cn/plugin?id=14130
- 文件读写、copy、move、遍历文件夹、是否存在、删除、重命名......等等
-
读取常用文件目录(包含U盘)https://ext.dcloud.net.cn/plugin?id=15243
- uniapp(_www、_doc、_download)
- Android(数据目录、文件目录、缓存目录、环境environment目录、SDCard目录、外接U盘)
- iOS(documentDirectory、temporaryDirectory、libraryDirectory、cachesDirectory)
- 从U盘读取或保存文件
-
读取本地相册图片视频音频,可自定义UI界面-新版https://ext.dcloud.net.cn/plugin?id=18288
- 获取相册图片、视频、音频文件
- 常用于自定义相册UI
集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027
配置权限
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))
})
返回的数据模型(如需更多字段联系QQ252797991)
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
}