uniapp 调用手机相册和手机照相功能

uniapp 调用 andriod 接口 获取本地相册 /照相机功能(vue3)

importOrChooseImage.vue

<template>
	<view style="position: fixed;bottom: 0rpx; height: 140rpx;background-color: #FFFFFF; width: 750rpx; border-top: 1rpx solid #FAFBFD;display: flex;flex-direction: row;justify-content: space-between;">
		<view @click="chooseImage" style="margin-top: -30rpx;">
      <text>选择照片</text>
		</view>
	</view>
</template>

<script>
	export default {
		setup(props,{emit}){
			const goToPage = (uri)=> {
					uni.navigateTo({
						url:uri
					})
				}
			const chooseImage = (params)=> {
						uni.chooseImage({
							count:1000,
							sizeType:['original','compressed'],
							sourceType:['camera','album'],	//调用原生相册和原生相机,弹出选择
							// sourceType:['album'], 直接调用原生相册
							// sourceType:['camera'], 直接调用原生相机
							success:(res)=>{
								// imagepath.value = res.tempFilePaths[0]
								console.log(res)
								emit("changeList",res.tempFilePaths)
							}
						})
				}
			return {
				goToPage,
				chooseImage
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>

import.vue 部分界面

<template>
  //importOrChooseImage在uniapp 中调用的是app的全局组件 ,所以这里直接调用
		<importOrChooseImage @changeList="changeList"></importOrChooseImage>
</template>
<script>
	import {mapGetters,mapActions} from 'vuex';

	export default {
		data() {
			return {
				show:false,
				imageList:[]
			}
		},
		onLoad(options) {	
		},
		computed:{
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					 delta: 1,  //返回层数,2则上上页
				})
			},
			changeList(res){
				//res 返回选中图片的地址 存到sqlite 数据库中
				this.imageList = [...this.imageList,...res]
				// console.log("imageList:"+this.imageList)
			},
			xshow() {
			      this.show = !this.show;
			},
			goToPage(uri) {
				uni.navigateTo({
					url:uri
				})
			    
			},
			
		}
	}
</script>
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值