您好,登錄后才能下訂單哦!
這篇文章主要介紹了uniapp怎么設(shè)置使用照相機和相冊權(quán)限的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇uniapp怎么設(shè)置使用照相機和相冊權(quán)限文章都會有所收獲,下面我們一起來看看吧。
在寫uniapp項目中,對于上傳圖片有時會有這樣的需求:只可使用照相機拍攝上傳,不可使用相冊。
在uniapp中,我們通常會使用uni-file-picker這個組件,但是這個組件中,有點缺陷,就是沒有對這個功能的傳值設(shè)置,這里就要給組件進行修改了。
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()函數(shù),添加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、在頁面調(diào)用模板中使用改組件,使用 :sourceType或者 :source-type來控制照相機與相冊的使用權(quán)限,如下:
<template> <view class="container"> <!--設(shè)置只能使用照相機 :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> <!--設(shè)置只能使用照相機 則 :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>
關(guān)于“uniapp怎么設(shè)置使用照相機和相冊權(quán)限”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“uniapp怎么設(shè)置使用照相機和相冊權(quán)限”知識都有一定的了解,大家如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。