uniapp简单的拍照上传预览

样式可根据需求自行设计

<template>
	<view>
		<button type="default" @click="updataimg">本地选择</button>
		<view class="">
			<view class="">
				<view v-for="(image, index) in imageList" :key="index">
					<view class="">
						<view class="" @click="onDeleteClick(index)">
							<u-icon class="" name="trash-fill" color="#EB0909" size="28" hover-class="unicolor">
							</u-icon>
						</view>
						<image class="" :src="image" :data-src="image" @tap="previewImage">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: []
			}
		},
		methods: {
			//上传
			updataimg(){
				const that = this
				uni.chooseImage({
					count: 6, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album',
						'camera'
					], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						console.log(res)
						const len = that.imageList.length
						if (len >= 6) {
							uni.showToast({
								title: '图片最多上传6张'
							})
						} else {
							for (let i = 0; i < 6 - len; i++) {
								if (res.tempFilePaths[i]) that.imageList.push(res
									.tempFilePaths[i])
							}
						}
					}
				})
			},
			//照片删除
			onDeleteClick(index) {
				this.imageList.splice(index, 1)
			},
			//照片的预览
			previewImage(e) {
				let imgArr = []
				imgArr.push(e.currentTarget.dataset.src)
				console.log(imgArr);
				uni.previewImage({
					urls: imgArr
				})
			},
		}
	}
</script>

<style>
</style>