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>