springboot + uniapp 头像上传功能及样式模版

springboot + uniapp 头像上传和预览功能及样式模版

该头像上传使用 uni.chooseImage 方法从本地相册选择图片或使用相机拍照。

再通过 uni.uploadFile 将本地资源上传到服务器。具体使用方法请参考 uniapp 官网 API。

以下是前端效果图：

上传之后效果

点击头像预览效果

前端代码

确保点击图片仅触发预览功能而不触发 avatarSwitch 函数，可以通过在图片元素上使用 @click.stop 修饰符来阻止事件传播。

<template>
	<view class="container">
		<view class="avatar-wrap" @click="avatarSwitch">
			<text>头像</text>
			<view class="avatar-image">
				<image :src="avatarUrl" @click.stop="previewImage"></image>
				<view class="avatar-symbol">></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
     
     
		data() {
     
     
			return {
     
     
				avatarUrl: '',
			}
		},
		methods: