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 style="margin-top: 20rpx;padding-left: 60rpx; display: flex;flex-direction: row;">
			<view style="margin-top: 20rpx;">
				<image style="width: 40rpx; height: 40rpx;" src="../../static/hxuan.png" mode="aspectFill"></image>
			</view>
			<view style="display: flex;justify-content: center;margin-top: 18rpx;margin-left: 20rpx;">
				<text style="font-size: 32rpx;font-weight: 600;">全选照片</text>
			</view>
		</view>
		<view @click="chooseImage" style="margin-top: -30rpx;">
			<image style="width: 140rpx;height: 140rpx;" src="../../static/haddr.png" mode="aspectFill"></image>
		</view>
		<view @click="goToPage('/pages/userlist/userlist')" style="margin-top: 20rpx;padding-right: 60rpx; display: flex;flex-direction: row;">
			<view style="margin-top: 18rpx;">
				<image style="width: 42rpx; height: 42rpx;" src="../../static/huser.png" mode="aspectFill"></image>
			</view>
			<view style="display: flex;justify-content: center;margin-top: 18rpx;margin-left: 20rpx;">
				<text style="font-size: 32rpx;font-weight: 600;">匹配患者</text>
			</view>
		</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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐