uniapp組件uni-file-picker中設(shè)置使用照相機(jī)和相冊(cè)權(quán)限的操作方法
在寫uniapp項(xiàng)目中,對(duì)于上傳圖片有時(shí)會(huì)有這樣的需求:只可使用照相機(jī)拍攝上傳,不可使用相冊(cè)。
在uniapp中,我們通常會(huì)使用uni-file-picker這個(gè)組件,但是這個(gè)組件中,有點(diǎn)缺陷,就是沒有對(duì)這個(gè)功能的傳值設(shè)置,這里就要給組件進(jìn)行修改了。
1、在uni-file-picker組件中的uni-file-picker.vue中的js部分,找到props添加一個(gè)變量,如下:
props: {
....以上省略
sizeType: {
type: Array,
default () {
return ['original', 'compressed']
}
},
//這是新加的變量,默認(rèn)值是相冊(cè)和照相機(jī)都有的
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為新添加的控制照相機(jī)與相冊(cè)的傳值變量
sourceType: this.sourceType,
sizeType: this.sizeType,
// TODO 如果為空,video 有問題
extension: _extname.length > 0 ? _extname : undefined,
count: this.limitLength - this.files.length, //默認(rèn)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來控制照相機(jī)與相冊(cè)的使用權(quán)限,如下:
<template>
<view class="container">
<!--設(shè)置只能使用照相機(jī) :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è)置只能使用照相機(jī) 則 :sourceType="sourceType2" -->
<!--若都可以使用,則不用此變量,默認(rèn)都可以使用的-->
</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組件uni-file-picker中設(shè)置使用照相機(jī)和相冊(cè)的權(quán)限的文章就介紹到這了,更多相關(guān)uniapp組件uni-file-picker相冊(cè)權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue element-ui el-tooltip組件失效問題及解決
這篇文章主要介紹了vue element-ui el-tooltip組件失效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取
這篇文章主要介紹了關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
element實(shí)現(xiàn)二級(jí)菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例
本文主要介紹了element實(shí)現(xiàn)二級(jí)菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問題的修復(fù)方法,需要的朋友可以參考下2018-01-01

