uniapp选取本地资源(图片,视频,文件)

这篇具有很好参考价值的文章主要介绍了uniapp选取本地资源(图片,视频,文件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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端对应inputcapture属性,设置为['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支持

示例

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包