返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法
  • 148
分享到

uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

摘要

在写uniapp项目中,对于上传图片有时会有这样的需求:只可使用照相机拍摄上传,不可使用相册。 在uniapp中,我们通常会使用uni-file-picker这个组件,但是这个组件中

在写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']
				}
			}
},

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)
		})
},

3、在页面调用模板中使用改组件,使用 :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>

4、js部分写法如下:

<script>
export default {
	data() {
		return{
           mentouValue:'',
           sourceType1:['camera'], 
           sourceType2:['album'], 
        }
    },
    methods:{
        //选择图片
        mentouSelect(e){
			console.log("选择图片",e)
		},
 
        //删除图片
        mentouDelete(){
			this.mentouValue = ''
		},
    }
}
</script>

到此这篇关于uniapp组件uni-file-picker中设置使用照相机和相册的权限的文章就介绍到这了,更多相关uniapp组件uni-file-picker相册权限内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

本文链接: https://lsjlt.com/news/172873.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作