In the Uniapp project, there is sometimes a need to upload pictures: you can only use the camera to shoot and upload, and you cannot use the album.
In uniapp, we usually use the uni-file-picker component, but there is a bit of a flaw in this component, which is that there is no value transfer setting for this function, so the component needs to be modified here.
1. In the js part of the uni-file-picker component, find props and add a variable, as follows:
props: {
....The above omitted
sizeType: {
type: Array,
default () {
return ['original', 'compressed']
}
},
//This is a newly added variable, the default value is both for both album and camera sourceType: {
type: Array,
default () {
return ['camera','album']
}
}
},2. In the js part of the uni-file-picker component, find the choiceFiles() function and add the pass value of sourceType, as follows:
/**
* Select the file and upload it
*/
chooseFiles() {
const _extname = get_extname()
// Get the suffix uniCloud
.chooseAndUploadFile({
type: ,
compressed: false,
//sourceType is the newly added variable for controlling the value transfer of camera and album. sourceType: ,
sizeType: ,
// If TODO is empty, there is a problem with video extension: _extname.length > 0 ? _extname : undefined,
count: - , //Default 9 onChooseFile: ,
onUploadProgress: progressEvent => {
(progressEvent, )
}
})
.then(result => {
()
})
.catch(err => {
('Select failed', err)
})
},3. Use modified components in the page call template, and use :sourceType or :source-type to control the usage permissions of the camera and album, as follows:
<template>
<view class="container">
<!--Setting only cameras :sourceType="sourceType1" -->
<view class="upload-box">
<view class="pic-desc">photo1</view>
<uni-file-picker v-model="mentouValue" return-type="object" fileMediatype="image" mode="grid" :sourceType="sourceType1" :auto-upload="false" @select="mentouSelect" @delete="mentouDelete"/>
</view>
<!--Setting only cameras but :sourceType="sourceType2" -->
<!--If all can be used，but不用此变量，All available by default-->
</view>
<template>4. The js part is written as follows:
<script>
export default {
data() {
return{
mentouValue:'',
sourceType1:['camera'],
sourceType2:['album'],
}
},
methods:{
//Select a picture mentouSelect(e){
("Select Picture",e)
},
//Delete the picture mentouDelete(){
= ''
},
}
}
</script>This is the article about setting permissions for using cameras and albums in uniapp component uni-file-picker. For more information about uniapp component uni-file-picker album permissions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!