uniapp组件uni-file-picker中设置仅使用照相机和仅相册的权限_uni-file-picker sourcetype

在写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']
				}
			}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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)
		})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3、在页面调用模板中使用改组件，使用 :sourceType或者 :source-type来控制照相机与相册的使用权限，如下：

4、js部分写法如下：

<script>
export default {
	data() {
		return{
           mentouValue:'',
           sourceType:['camera'], //仅能使用相机
           sourceType1:['album'], //仅能调用手机图库
        }
    },
    methods:{
        //选择图片
        select(e){
			console.log("选择图片",e)
		},
		selectAuxiliary(e){
		console.log("选择图片",e)
		},
 
        //删除图片
        deleteFile(){
			....
		},
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

至此 全部，感谢！