UNIAPP----调用手机上传图片及拍照功能并显示在页面上

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

直接上代码：

HTML： 创建事件  image

<view class="image" @click="image">
		<image src="../../static/image.svg" mode=""></image>
</view>

uni.chooseImage() API  将上传或拍照的图片，打印res。

返回结果的tempFilePaths[0] 就是图片地址， 但是这个地址不能直接用，可以放在新数组里面，

因为最多需要传9张，超出的pop掉最后一个就行，并且给用户提示最大数量

image(){
				uni.chooseImage({
				  	count:9,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						// console.log(res);
						// const tempFilePaths = res.tempFilePaths;
						// this.zp = res.tempFilePaths[0];
						// console.log(this.zp)
						this.list.push(res.tempFilePaths[0])
						// console.log(this.list)
						
				    }
				});
			},

data里面写个空数组    list：[ ]

this.list.push(res.tempFilePaths[0]) 即可。

<view class="zp" v-for="(item,index) in list" >
				<image  :src="item" mode="" style="width: 100%;height: 200rpx;	border-radius: 10rpx;">
                </image>
</view>

在页面上，需要放置图片的地方，遍历数组list，让item动态放到  :src下面 即可。

这样再设置图片的大小，就能按你需要方式放页面上。代码不全，只给思路。