uniapp怎么设置使用照相机和相册权限
这篇文章主要介绍了uniapp怎么设置使用照相机和相册权限的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇uniapp怎么设置使用照相机和相册权限文章都会有所收获,下面我们一起来看看吧。
在写uniapp项目中,对于上传图片有时会有这样的需求:只可使用照相机拍摄上传,不可使用相册。
在uniapp中,我们通常会使用uni-file-picker这个组件,但是这个组件中,有点缺陷,就是没有对这个功能的传值设置,这里就要给组件进行修改了。
在uni-file-picker组件中的uni-file-picker.vue中的js部分,找到props添加一个变量,如下:
props: {....以上省略sizeType: {type: Array,default () {return ['original', 'compressed']}}, //这是新加的变量,默认值是相册和照相机都有的sourceType: {type: Array,default () {return ['camera','album']}}},
在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, //默认9onChooseFile: this.chooseFileCallback,onUploadProgress: progressEvent => {this.setProgress(progressEvent, progressEvent.index)}}).then(result => {this.setSuccessAndError(result.tempFiles)}).catch(err => {console.log('选择失败', err)})},
在页面调用模板中使用改组件,使用 :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>
js部分写法如下:
<script>export default {data() {return{ mentouValue:'', sourceType1:['camera'], sourceType2:['album'], } }, methods:{ //选择图片 mentouSelect(e){console.log("选择图片",e)}, //删除图片 mentouDelete(){this.mentouValue = ''}, }}</script>
关于“uniapp怎么设置使用照相机和相册权限”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“uniapp怎么设置使用照相机和相册权限”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341