usky-web-mobile/src/pages/common/test/index.vue

<template>
	<view>
		<view @tap="goCamera()" class="cameraButton">
			拍照按钮
		</view>
		
		<view class="uni-list list-pd">
			<view class="uni-uploader__files">
				<view v-for="(image, index) in imageList" :key="index" class="abc">
					<view class="uni-uploader__file" style="inline-block">
						<view class="delete " :style="{'z-index': 99}" @tap="onDeleteClick(index)">x</view>
						<view class=" images-one">
							<image class="uni-uploader__img image-bg" :src="image" :data-src="image"
								@tap="previewImage"></image>
						</view>

					</view>
				</view>
				<view class="uni-uploader__input-box" v-show="imageList.length > 0">
					<view class="uni-uploader__input" @tap="onGetImgClick"></view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {

				imageList: [],

			}
		},
		mounted() {

		},


		//拍照
		methods: {

			// 删除图片
			onDeleteClick(index) {
				this.imageList.splice(index, 1)
			},
			// previewImage() {
			// 	// 预览功能，相关博客有
			// },



			goCamera() {
				const that = this
				uni.chooseImage({
					count: 2, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						
						var tempFilePaths = res.tempFilePaths[0]
						alert(1)
						alert(tempFilePaths)
						const len = that.imageList.length
						if (len >= 2) {
							uni.showToast({
								title: '图片最多上传2张'
							})
						} else {
							for (let i = 0; i < 2 - len; i++) {
								if (res.tempFilePaths[i]) that.imageList.push(res.tempFilePaths[i])
							}
						}
					}
				})

			},




		}

	}
</script>

<style>
	.cameraButton {
		border: 1px solid red;
		display: inline-block;
		border-radius: 10rpx;
		padding: 10rpx
	}

	.images-one {
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		display: inline-block;
		margin-right: 20rpx
	}

	.image-bg {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.abc {
		display: inline-block
	}
</style>