1、html页面布局

每个人的布局不同，这里就显示我写的布局，可更具自己的项目布局来。

2、相册选择图片并上传

点击头像执行updateImg方法，实现从相册选择图片并上传，这里因为需要上传FormData格式的参数，而uniapp不支持，所以使用uni.uploadFile来上传。

		updateImg() {
			uni.chooseImage({
				sourceType: ['album'], //从相册选择
				success: chooseImageRes => {
					console.log('成功', chooseImageRes);
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: 'http://192.168.31.00:7005/file/upload', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							accessToken: uni.getStorageSync('accessToken'),
							platform: 2,
							type: 1
						},
						formData: {
							category: 3
						},
						success: res => {
							// console.log('上传成功', JSON.parse(res.data));
							// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态
							let data = JSON.parse(res.data);
							// 成功：获取到头像
							if (data.msgCode == 200) {
								this.updateParams.headImg = JSON.parse(res.data).data;
								// 更新当前页面数据
								this.updateUserInfo();
							}
							// 失败报错
							if (data.msgCode == 500) {
								this.myToast(data.msgContent, 'none');
							}
							// 登陆过期
							if (data.msgCode == 311 || data.msgCode == 312) {
								myToast(
									data.msgContent,
									'none',
									() => {
										const res = uni.getStorageInfoSync();
										for (let s of res.keys) {
											// 保留账号密码
											if (s === 'pwd' || s === 'lang') {
												// console.log('保留账号密码', s)
											} else {
												uni.removeStorageSync(s);
											}
										}
										uni.reLaunch({
											url: '/pages/group/index'
										});
									},
									1000
								);
							}
						}
					});
				},
				fail: err => {
					this.myToast('图片上传失败', 'none');
				}
			});
		},

注：this.myToast是自己分装的提示组件，非uniapp自带的，可根据需求自行修改。