1. uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
---|---|---|---|---|
count | Number | 否 | 最多可以选择的图片张数,默认9 | 见下方说明 |
sizeType | Array<String> | 否 | original 原图,compressed 压缩图,默认二者都有 | App、微信小程序、支付宝小程序、百度小程序 |
extension | Array<String> | 否 | 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 | H5(HBuilder X2.9.9+) |
sourceType | Array<String> | 否 | album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 | |
success | Function | 是 | 成功则返回图片的本地文件路径列表 tempFilePaths | |
fail | Function | 否 | 接口调用失败的回调函数 | 小程序、App |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
Tips
- count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
- sourceType 在H5端对应
input
的capture
属性,设置为['album']
无效,依然可以使用相机。 - 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限uni.authorize(OBJECT) | uni-app官网
- App端如需选择非媒体文件,可在插件市场搜索文件选择,其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。
success 返回参数说明
参数 | 类型 | 说明 |
---|---|---|
tempFilePaths | Array<String> | 图片的本地文件路径列表 |
tempFiles | Array<Object>、Array<File> | 图片的本地文件列表,每一项是一个 File 对象 |
File 对象结构如下
参数 | 类型 | 说明 |
---|---|---|
path | String | 本地文件路径 |
size | Number | 本地文件大小,单位:B |
name | String | 包含扩展名的文件名称,仅H5支持 |
type | String | 文件类型,仅H5支持 |
示例文章来源:https://www.toymoban.com/news/detail-672956.html
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
2. uni.previewImage(OBJECT) @unipreviewimageobject
预览图片。
OBJECT 参数说明
参数名 | 类型 | 必填 | 说明 | 平台差异说明 |
---|---|---|---|---|
current | String/Number | 详见下方说明 | 详见下方说明 | |
urls | Array<String> | 是 | 需要预览的图片链接列表 | |
indicator | String | 否 | 图片指示器样式,可取值:”default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器。 | App |
loop | Boolean | 否 | 是否可循环预览,默认值为 false | App |
longPressActions | Object | 否 | 长按图片显示操作菜单,如不填默认为保存相册 | App 1.9.5+ |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
current 参数说明
1.9.5+ 支持传图片在 urls 中的索引值
current 为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间,current为必填。不填会报错
注意,当 urls 中有重复的图片链接时:
- 传链接,预览结果始终显示该链接在 urls 中第一次出现的位置。
- 传索引值,在微信/百度/字节跳动小程序平台,会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。
举例说明:
一组图片 [A, B1, C, B2, D]
,其中 B1 与 B2 的图片链接是一样的。
- 传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。
- 传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/字节跳动小程序平台,最终传入的 urls 是
[A, C, B2, D]
,过滤掉了与 B2 重复的 B1。
longPressActions 参数说明
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
itemList | Array<String> | 是 | 按钮的文字数组 |
itemColor | String | 否 | 按钮的文字颜色,字符串格式,默认为”#000000” |
success | Function | 否 | 接口调用成功的回调函数,详见返回参数说明 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
参数 | 类型 | 说明 |
---|---|---|
index | Number | 用户长按图片的索引值 |
tapIndex | Number | 用户点击按钮列表的索引值 |
示例
// 从相册选择6张图
uni.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function(res) {
// 预览图片
uni.previewImage({
urls: res.tempFilePaths,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
});
TIPS
- 在非H5端,previewImage是原生实现的,界面自定义灵活度较低。
- 插件市场有前端实现的previewImage,性能低于原生实现,但界面可随意定义;插件市场也有适于App端的previewImage原生插件,提供了更多功能。
3. uni.chooseMedia(OBJECT)
拍摄或从手机相册中选择图片或视频。
若选择和上传非图像、视频文件,另行参考:https://uniapp.dcloud.io/api/media/file。
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
x | x | 2.10.0+ | x | x | √ | x | x | √ |
OBJECT 参数说明
参数名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
count | Number | 9(注意:ios不可大于9) | 否 | 最多可以选择的文件个数 |
mediaType | Array. | [‘image’, ‘video’] | 否 | 文件类型 |
sourceType | Array. | [‘album’, ‘camera’] | 否 | 图片和视频选择的来源 |
maxDuration | Number | 10 | 否 | 拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 30s 之间 |
sizeType | Array. | [‘original’, ‘compressed’] | 否 | 仅对 mediaType 为 image 时有效,是否压缩所选文件 |
camera | String | ‘back’ | 否 | 仅在 sourceType 为 camera 时生效,使用前置或后置摄像头 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
OBJECT.mediaType 合法值
值 | 说明 |
---|---|
image | 只能拍摄图片或从相册选择图片 |
video | 只能拍摄视频或从相册选择视频 |
mix | 可同时选择图片和视频 |
OBJECT.sourceType 合法值
值 | 说明 |
---|---|
album | 从相册选择 |
camera | 使用相机拍摄 |
OBJECT.camera 合法值
值 | 说明 |
---|---|
back | 使用后置摄像头 |
front | 使用前置摄像头 |
success 返回参数说明
参数名 | 类型 | 说明 |
---|---|---|
tempFiles | Array. | 本地临时文件列表 |
type | String | 文件类型,有效值有 image 、video、mix |
res.tempFiles 的结构
参数名 | 类型 | 说明 |
---|---|---|
tempFilePath | String | 本地临时文件路径 (本地路径) |
size | Number | 本地临时文件大小,单位 B |
duration | Number | 视频的时间长度 |
height | Number | 视频的高度 |
width | Number | 视频的宽度 |
thumbTempFilePath | String | 视频缩略图临时文件路径 |
fileType | String | 文件类型 |
fileType 合法值
值 | 说明 |
---|---|
image | 图片 |
video | 视频 |
示例
uni.chooseMedia({
count: 9,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
console.log(res.tempFiles)
}
})
Tips文章来源地址https://www.toymoban.com/news/detail-672956.html
- 如需上传到cdn,可使用uniCloud.uploadFile API,uniCloud提供了免费cdn给开发者使用,详见概述 | uni-app官网
- 选择文件大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。
- 经开发者提醒,微信小程序ios真机可以选择的文件个数不能大于9,详见帖子【报Bug】uni.chooseMedia文档不够严谨,导致出现bug,小程序上架被驳回 - DCloud问答
到了这里,关于uniapp选取本地资源(图片,视频,文件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!