uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法
更新时间:2022年11月15日 13:51 点击:962 作者:youmi_sunshine
在写uniapp项目中,对于上传图片有时会有这样的需求:只可使用照相机拍摄上传,不可使用相册。
在uniapp中,我们通常会使用uni-file-picker这个组件,但是这个组件中,有点缺陷,就是没有对这个功能的传值设置,这里就要给组件进行修改了。
1、在uni-file-picker组件中的uni-file-picker.vue中的js部分,找到props添加一个变量,如下:
props: { ....以上省略 sizeType: { type: Array, default () { return ['original', 'compressed'] } }, //这是新加的变量,默认值是相册和照相机都有的 sourceType: { type: Array, default () { return ['camera','album'] } } },
2、在uni-file-picker组件中的uni-file-picker.vue中的js部分,找到chooseFiles()函数,添加sourceType的传值,如下:
/** * 选择文件并上传 */ chooseFiles() { const _extname = get_extname(this.fileExtname) // 获取后缀 uniCloud .chooseAndUploadFile({ type: this.fileMediatype, compressed: false, //sourceType为新添加的控制照相机与相册的传值变量 sourceType: this.sourceType, sizeType: this.sizeType, // TODO 如果为空,video 有问题 extension: _extname.length > 0 ? _extname : undefined, count: this.limitLength - this.files.length, //默认9 onChooseFile: this.chooseFileCallback, onUploadProgress: progressEvent => { this.setProgress(progressEvent, progressEvent.index) } }) .then(result => { this.setSuccessAndError(result.tempFiles) }) .catch(err => { console.log('选择失败', err) }) },
3、在页面调用模板中使用改组件,使用 :sourceType或者 :source-type来控制照相机与相册的使用权限,如下:
<template> <view class="container"> <!--设置只能使用照相机 :sourceType="sourceType1" --> <view class="upload-box"> <view class="pic-desc">照片1</view> <uni-file-picker v-model="mentouValue" return-type="object" fileMediatype="image" mode="grid" :sourceType="sourceType1" :auto-upload="false" @select="mentouSelect" @delete="mentouDelete"/> </view> <!--设置只能使用照相机 则 :sourceType="sourceType2" --> <!--若都可以使用,则不用此变量,默认都可以使用的--> </view> <template>
4、js部分写法如下:
<script> export default { data() { return{ mentouValue:'', sourceType1:['camera'], sourceType2:['album'], } }, methods:{ //选择图片 mentouSelect(e){ console.log("选择图片",e) }, //删除图片 mentouDelete(){ this.mentouValue = '' }, } } </script>
到此这篇关于uniapp组件uni-file-picker中设置使用照相机和相册的权限的文章就介绍到这了,更多相关uniapp组件uni-file-picker相册权限内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/youmi_sunshine/article/details/1259276
相关文章
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 这篇文章主要介绍了浅谈关于如何检测iOS14本地网络权限的一些思路,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- phpmyadmin是一款很不错的WEB对mysql数据库管理软件,如果你想创建数据库与设置用户权限我们必须操作用户的很高的权限,如ROOT权限,下面我来给大家介绍介绍。 先来配...2016-11-25
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要为大家详细介绍了uniapp 实现可以左右滑动导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-21
- 下面我们来看一篇关于安卓开发之保存ImageView中的图片到本地相册教程吧,希望这篇教程能够给大家带来帮助. 代码如下. private void saveImage(ImageView imageVi...2016-11-01
- 这篇文章主要介绍了C#判断程序是否是管理员权限运行的方法代码示例,本文直接给出实现代码例子,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了uniapp和vue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-19
- 这篇文章主要介绍了Java类的访问权限关键字用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-29
- 这篇文章主要介绍了 Postgres 创建Role并赋予权限的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-16
- 知识归纳因为MySQL是使用User和Host两个字段来确定用户身份的,这样就带来一个问题,就是一个客户端到底属于哪个host。 如果一个客户端同时匹配几个Host,对用户的确定将按照下面的优先级来排 基本观点越精确的匹配越优先...2015-11-08
- 这篇文章主要介绍了Postgresql 数据库权限功能的使用总结,具有很好的参考价值,对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
- 后台内容无法更新,如基本设置保存不了,数据库写不进去,很有可能是Everyone权限问题,即Everyone 无权操作文件夹,按照下面的步骤操作即可...2016-01-27
- 这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-12
- 这篇文章主要为大家详细介绍了uniapp微信小程序实现一个页面多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
- 这篇文章主要介绍了mysql免安装没有任何root权限的安装与配置教程,本文图文并茂给大家介绍的非常详细,需要的朋友参考下...2017-01-22
- 在php中要获取或目录权限我们可使用fileperms函数来获取,fileperms() 函数返回文件或目录的权限,。若成功,则返回文件的访问权限。若失败,则返回 false。 例子 1 ...2016-11-25
- 这篇文章主要为大家详细介绍了uni-app实现获取验证码倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
- 这篇文章主要介绍了uniapp电商小程序实现订单30分钟倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
- 本文章来给各位朋友介绍关于BlueHost跨站/跨目录权限解决方案,希望本文章对各位能带来帮助。 切换到PHP 5.3 (Single php.ini),点击Save保存,这时候FTP连接到BlueH...2016-10-10