Jinan_app/pages/demo/demo.vue

<template>
	<view class="">
		<image @click="chooseImage" :src="age.imgShow" class="toux" mode=""></image>
		<input v-model="age.text" type="text">
		<button @tap="aaa()">aaa</button>
		<button @tap="bbb()">bbb</button>
		<uni-section title="只选择图片" type="line">
			<view class="example-body">
				<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
			</view>
		</uni-section>
		<!-- <uni-file-picker v-model="age.imgShow" fileMediatype="image" mode="grid" @select="select" @progress="progress"
			@success="success" @fail="fail" /> -->
		<image @click="chooseImage" :src="api+fi" class="toux" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				api: this.$config.api+"/api/Objects/integration/",
				isAuth: false,
				imgShow: '',
				age: {
					imgShow: '',
					text: '',
				},
				fi:"",
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}]
			
		}
	},
	onLoad() {
			console.log(this.api);

			if (uni.getStorageSync('aabb')) {
				this.age = uni.getStorageSync('aabb')
				console.log(this.age);
			}
		},

		methods: {
			chooseImage() {
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择、摄像头
					success: function(res) {
						_this.age.imgShow = res.tempFilePaths[0]
					}
				});
				// ass()
			},
			aaa() {
				uni.setStorageSync('aabb', this.age)

			},
			bbb() {
				this.$request.uploadFile(this.age.imgShow, (data, res) => {
					console.log(data, res);
					this.fi=res.objectName
				})
			},
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="scss">
	.camera {
		width: 430rpx;
		height: 430rpx;
		border-radius: 50%;
		margin: 20px auto 0;
		position: relative;
	}

	.camera image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;
	}

	.camera camera {
		width: 428rpx;
		height: 428rpx;
	}

	button.takePhoto:not([size='mini']) {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 90rpx;
		border-radius: 0;
	}
</style>