teaching-uniapp/pages/login_cs/login_cs.vue

<template>
	<view class="login_cs">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<input type="nickname" style="margin:30rpx auto;width: 400rpx;background-color: aqua;" placeholder="请输入昵称" />

		<button class="avatar-wrapper" @click="login">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '',
			};
		},
		methods: {
			getPhoneNumber(e) {
				console.log(e.detail.code) // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno) // 错误码（失败时返回）
			},
			onChooseAvatar(e) {
				console.log(e);
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl

				//对临时图片链接进行base64编码
				var avatarUrl_base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(this.avatarUrl,
					'base64')
				console.log(avatarUrl_base64);
				
				
				uni.request({
					url: 'http://localhost:3001/login2',
					method:'POST',
					data:avatarUrl_base64,
					success(res) {
						console.log(res);
					}
				})
			},
			login() {
				wx.login({
					success: (res) => {
					 return	console.log(res)
						var code = res.code //获取code

						

						wx.request({ //调用后端接口
							url: 'http://localhost:3001/login2',
							method: 'POST',
							// header: {
							// 	'content-type': 'application/json'
							// },
							data: {
								code: code, //请求体中封装code
							},
							success(res) {
								console.log(res)
								//页面跳转
								// wx.navigateTo({
								// 	//携带用户头像信息和用户昵称信息
								// 	url: '/index/index?userAvatarUrl=' + res.data.data
								// 		.userAvatarUrl + '&userName=' + res.data.data.userName,
								// })
							}
						})
					},
				})


			}
		}
	}
</script>

<style lang="scss">
	.avatar-wrapper {
		width: 300rpx;
		background-color: #fff;
		margin: auto;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;

	}
</style>