微信小程序获取头像和昵称并上传服务器

<template>
	<view style="width: calc(100%);background-color: rgba(247, 247, 247, 1);">
		<view class="main" style="position: relative;">
			<BackButton buttonColor="black" />
			<view class="body" style="position: absolute;z-index: 2;">
				<view class="welcome-box">
					<span>请先填写个人信息</span>
				</view>
				<view class="form-box">
					<view class="item">
						<view class="lable">
							头像：
						</view>
						<view class="bc" style="width: 230rpx;">
							<button style="margin: 0;padding: 0;line-height: 0;" open-type="chooseAvatar"
								@chooseavatar="onChooseAvatar">
								<image v-show="form.avatar==undefined||form.avatar==null||form.avatar==''"
									src="../../static/wx-head.png" style="width: 150rpx;height: 150rpx;"></image>
								<image v-show="form.avatar!=undefined&&form.avatar!=null&&form.avatar!=''"
									style="width: 150rpx;height: 150rpx;" :src="form.avatar"></image>
							</button>
						</view>
					</view>

					<view class="item">
						<view class="lable">
							名字：
						</view>
						<input type="nickname" @blur="userNameInput" v-model="form.nickName" class="input"
							placeholder="请填入名字">
					</view>
					<view class="item">
						<view class="lable">
							手机号：
						</view>
						<input type="text" v-model="form.phone" disabled="true" class="input" placeholder="请填入手机号码">
					</view>

					<view class="item">
						<view class="lable">
							出生日期：
						</view>
						<view>
							<picker mode="date" :value="form.birthday" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<input type="text" :value="form.birthday" disabled="true" class="input"
									placeholder="请选择出生日期">
							</picker>
						</view>
					</view>


					<view class="sex-box">
						<view :class="form.sex==1 ? 'sex-item-active' : 'sex-item'" @click="form.sex=1">
							<u-icon name="man" :color="form.sex==1 ? '#CC2929' : 'rgba(0,0,0,0.4)'" size="23"></u-icon>
							<text style="font-size: 28rpx;"> 男性</text>
						</view>
						<view :class="form.sex==0 ? 'sex-item-active' : 'sex-item'" @click="form.sex=0">
							<u-icon name="woman" :color="form.sex==0 ? '#CC2929' : 'rgba(0,0,0,0.4)'"
								size="23"></u-icon>
							<text style="font-size: 28rpx;"> 女性</text>
						</view>
					</view>
					<!-- <view class="grey-btn" v-if="!formIsValid">进入首页</view>
					<view class="active-btn" v-else>进入首页</view> -->

					<view v-if="lastPage=='index'">
						<view :class="formIsValid ? 'active-btn' : 'grey-btn'" @click="submit">更新信息</view>
						<view class="active-btn" @click="logout">退出系统</view>
					</view>

					<view v-else :class="formIsValid ? 'active-btn' : 'grey-btn'" @click="submit">进入首页</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BackButton from '@/components/BackButton.vue';
	export default {
		components: {
			BackButton,
		},
		data() {
			return {
				avatar: uni.getStorageSync('avatar'),
				lastPage: '',
				form: {
					id: "",
					avatar: null,
					phone: "",
					nickName: "",
					birthday: "",
					sex: 1,
				}
			}
		},
		onLoad(option) {
			// const user = uni.getStorageSync("user")
			// this.form.id = user.id
			// this.form.phone = user.phone

			if (uni.getStorageSync('user') != undefined && uni.getStorageSync('user') != null && uni.getStorageSync(
					'user') != '') {
				this.form = uni.getStorageSync('user')
			}

			if (option.lastPage == 'index') {
				this.lastPage = option.lastPage
			}


		},
		onShow() {

		},
		computed: {
			formIsValid() {
				return Object.keys(this.form).every(key => {
					const value = this.form[key];
					// 只检查字符串类型的字段  
					return typeof value !== 'string' || value !== "";
				});
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		watch: {
			form: {
				handler(newValue, oldValue) {},
				deep: true,
			},
		},
		methods: {
			userNameInput(e) {
				this.form.nickName = e.detail.value
			},
			onChooseAvatar(e) {
				const that = this
				console.log('头像信息', e)
				const avatarUrl = e.detail.avatarUrl
				// this.base64(avatarUrl, "png").then(res => {
				// 	console.log(res)
				// 	this.avatar=res
				// 	uni.setStorageSync('avatar',res)
				// })
				uni.uploadFile({
					url: '后端文件上传接口',
					filePath: avatarUrl,
					name: '接口文件接收字段，如：files',
					header: {
						"Authorization": uni.getStorageSync('user').token
					},
					success(res) {
						console.log('success', res)
						const data = JSON.parse(res.data)
						console.log(data)
						if (data.code == 0) {
							// that.form.avatar = data.data.filePath
						}else{
							console.log(data.msg)
							uni.showToast({
								title:'上传失败！'
							})
						}
					},
					fail(res) {
						console.log('fail', res)
					}
				})

			},
			// base64(url, type) {
			// 	return new Promise((resolve, reject) => {
			// 		wx.getFileSystemManager().readFile({
			// 			filePath: url, //选择图片返回的相对路径
			// 			encoding: 'base64', //编码格式
			// 			success: res => {
			// 				console.log('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
			// 				resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
			// 				// resolve(res.data)
			// 			},
			// 			fail: res => reject(res.errMsg)
			// 		})
			// 	})
			// },
			logout() {
				uni.removeStorageSync('user')
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			submit() {
				if (this.formIsValid) {
					console.log("表单有效", this.form);

					this.request({
						url: '/user/updateUser',
						method: 'POST',
						data: this.form
					}).then(res => {
						console.log('res', res)
						if (res.code == 0) {


							uni.setStorageSync("user", this.form)
							console.log('form', this.form)
							if (this.lastPage == 'index') {
								uni.navigateBack({
									delta: 1,
								});
								uni.showToast({
									icon: 'success',
									title: '更新成功',
									duration: 2000
								})
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						} else {
							console.log(res.msg)
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					}).catch(error => {
						uni.showToast({
							icon: 'none',
							title: error
						})
					})
				} else {
					console.log("表单中有空项", this.form);
					uni.showToast({
						icon: 'error',
						title: '表单中有空项',
					})
				}
			},
			bindDateChange: function(e) {
				this.form.birthday = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 150;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		// height: 472px;
		height: 100vh;
		width: 100%;
		// border: 1px solid;

		.body {
			padding: 52px 48px;

			.welcome-box {
				width: 546rpx;
				height: 60rpx;
				// font-family: AlibabaPuHuiTi_2_65_Medium;
				// font-size: 44rpx;
				font-size: 40rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.9);
				margin-top: 200rpx;
				display: flex;
				flex-wrap: nowrap;
			}

			.form-box {
				margin-top: 100rpx;

				.item {
					display: flex;

					.lable {
						width: 150rpx;
						white-space: nowrap;
						margin: auto 0;
						text-align: right;
						margin-left: -40rpx;
					}

					.input {
						width: 400rpx;
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 44rpx;
						font-size: 28rpx;
						padding: 0 30rpx;
						margin: 20rpx 0;
					}
				}



				.active-btn {
					margin: 20rpx 0;
					width: 558rpx;
					height: 88rpx;
					background-color: rgba(204, 41, 41, 1);
					color: rgba(255, 255, 255, 0.9);
					border-radius: 25px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.grey-btn {
					margin: 20rpx 0;
					width: 558rpx;
					height: 88rpx;
					background: #E1E1E1;
					color: rgba(0, 0, 0, 0.6);
					border-radius: 25px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.tips {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.5);
					text-align: center;
					margin-top: 44rpx;
				}

				.sex-box {
					display: flex;
					margin: 0 auto;

					.sex-item {
						margin: 40rpx 20rpx;
						width: 242rpx;
						height: 80rpx;
						background: #E1E1E1;
						border-radius: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgba(0, 0, 0, 0.4);

					}

					.sex-item-active {
						margin: 40rpx 17rpx;
						width: 242rpx;
						height: 80rpx;
						border: 2rpx solid #CC2929;
						background: rgba(204, 41, 41, 0.1);
						border-radius: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #CC2929;
					}
				}


			}
		}

		.bottom-box {
			margin: 0 60rpx;
			position: fixed;
			bottom: 130rpx;
		}
	}
</style>