| uniapp选取本地资源(图片,视频,文件) | 您所在的位置：网站首页 › uniapp文件管理器插件 › uniapp选取本地资源(图片,视频,文件) |
|
1. uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。 App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera OBJECT 参数说明 参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数，默认9见下方说明sizeTypeArray否original 原图，compressed 压缩图，默认二者都有App、微信小程序、支付宝小程序、百度小程序extensionArray否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9+)sourceTypeArray否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项successFunction是成功则返回图片的本地文件路径列表 tempFilePathsfailFunction否接口调用失败的回调函数小程序、AppcompleteFunction否接口调用结束的回调函数（调用成功、失败都会执行）Tips count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。sourceType 在H5端对应input的capture属性，设置为['album']无效，依然可以使用相机。可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限uni.authorize(OBJECT) | uni-app官网App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。 success 返回参数说明 参数类型说明tempFilePathsArray图片的本地文件路径列表tempFilesArray、Array图片的本地文件列表，每一项是一个 File 对象File 对象结构如下 参数类型说明pathString本地文件路径sizeNumber本地文件大小，单位：BnameString包含扩展名的文件名称，仅H5支持typeString文件类型，仅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 参数说明 参数名类型必填说明平台差异说明currentString/Number详见下方说明详见下方说明urlsArray是需要预览的图片链接列表indicatorString否图片指示器样式，可取值：”default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器。ApploopBoolean否是否可循环预览，默认值为 falseApplongPressActionsObject否长按图片显示操作菜单，如不填默认为保存相册App 1.9.5+successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）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 参数说明 参数类型必填说明itemListArray是按钮的文字数组itemColorString否按钮的文字颜色，字符串格式，默认为”#000000”successFunction否接口调用成功的回调函数，详见返回参数说明failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）success 返回参数说明 参数类型说明indexNumber用户长按图片的索引值tapIndexNumber用户点击按钮列表的索引值示例 // 从相册选择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。 平台差异说明 AppH5微信小程序支付宝小程序百度小程序字节跳动小程序、飞书小程序QQ小程序快手小程序京东小程序xx2.10.0+xx√xx√OBJECT 参数说明 参数名类型默认值必填说明countNumber9（注意：ios不可大于9）否最多可以选择的文件个数mediaTypeArray.[‘image’, ‘video’]否文件类型sourceTypeArray.[‘album’, ‘camera’]否图片和视频选择的来源maxDurationNumber10否拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间sizeTypeArray.[‘original’, ‘compressed’]否仅对 mediaType 为 image 时有效，是否压缩所选文件cameraString‘back’否仅在 sourceType 为 camera 时生效，使用前置或后置摄像头successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）OBJECT.mediaType 合法值 值说明image只能拍摄图片或从相册选择图片video只能拍摄视频或从相册选择视频mix可同时选择图片和视频OBJECT.sourceType 合法值 值说明album从相册选择camera使用相机拍摄OBJECT.camera 合法值 值说明back使用后置摄像头front使用前置摄像头success 返回参数说明 参数名类型说明tempFilesArray.本地临时文件列表typeString文件类型，有效值有 image 、video、mixres.tempFiles 的结构 参数名类型说明tempFilePathString本地临时文件路径 (本地路径)sizeNumber本地临时文件大小，单位 BdurationNumber视频的时间长度heightNumber视频的高度widthNumber视频的宽度thumbTempFilePathString视频缩略图临时文件路径fileTypeString文件类型fileType 合法值 值说明image图片video视频示例 uni.chooseMedia({ count: 9, mediaType: ['image','video'], sourceType: ['album', 'camera'], maxDuration: 30, camera: 'back', success(res) { console.log(res.tempFiles) } })Tips 如需上传到cdn，可使用uniCloud.uploadFile API，uniCloud提供了免费cdn给开发者使用，详见概述 | uni-app官网选择文件大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。经开发者提醒，微信小程序ios真机可以选择的文件个数不能大于9，详见帖子【报Bug】uni.chooseMedia文档不够严谨，导致出现bug，小程序上架被驳回 - DCloud问答 |
| CopyRight 2018-2019 实验室设备网 版权所有 |