uniProject/pages/client/my/myInfo.vue

<template>
	<view class="my-info">
		<!-- 导航区域 -->
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">个人信息</text>
		</view>
		<!-- 头像 -->
		<view>
			<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" :auto-upload="false"
				@select="handleSelect" file-mediatype="image">选择</uni-file-picker>
			<view>图片地址：{{data.icon}}</view>
		</view>
		<!-- 姓名 -->
		<view></view>
		<!-- 证件号 -->
		<view></view>
		<!-- 电话 -->
		<view></view>
		<!-- 性别 -->
		<view></view>

		<button @click="handleUpdate">更新</button>
	</view>
</template>

<script setup>
	import * as myApi from "@/api/my.js";
	import {
		getAliyunPolicy
	} from "@/api/jiazheng.js"

	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const imageStyles = ref({
		width: 64,
		height: 64,
		border: {
			radius: '50%'
		}
	});

	const data = reactive({
		from: 'shouye', // my | kaoshi | shouye
		gender: 0,
		icon: '',
		realName: '',
		idcard: '',
		userName: '',
		userId: null
	})

	onLoad((options) => {
		data.from = options.from || 'shouye';

		initPage();
	})

	function handleSelect(e) {
		doUploadImage(e.tempFilePaths[0])
	}


	function doUploadImage(filePath) {
		const loading = uni.showLoading({
			title: '上传中...',
			mask: true
		});

		try {
			const suffix = filePath.split('.').pop();
			let req = {
				prefix: 'resource/',
				suffix: suffix
			}

			getAliyunPolicy(req).then(res => {
				if (res.code == 0) {
					const policyData = res.data;
					const formData = {
						key: policyData.key,
						policy: policyData.policy,
						OSSAccessKeyId: policyData.accessid,
						signature: policyData.signature,
						success_action_status: '200',
						file: {
							name: policyData.key,
							uri: filePath
						}
					};
					uni.uploadFile({
						url: policyData.uploadUrl,
						filePath: filePath,
						name: 'file',
						formData: formData,
						header: {
							'Content-Type': 'multipart/form-data'
						},
						success(uploadRes) {
							if (uploadRes.statusCode === 200) {
								data.icon = `${policyData.downloadUrl}/${policyData.key}`;
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: '上传失败',
								});
							}
							uni.hideLoading();
						},
						fail(err) {
							uni.showToast({
								title: '上传失败',
							});
							uni.hideLoading();
						}
					});

				} else {
					uni.showToast({
						title: '获取凭证失败',
					});
					uni.hideLoading();
				}
			})
		} catch (error) {
			uni.showToast({
				title: '上传失败',
				icon: 'none'
			});
			uni.hideLoading();
		}
	}

	function handleUpdate() {
		myApi.getUserUpdate({}).then(res => {
			if (res.data) {
				uni.showToast({
					title: '更新成功'
				})
			}
		})
	}

	function handleBack() {
		if (data.from == 'my') {
			uni.redirectTo({
				url: '/pages/client/my/index'
			})
		} else if (data.from == 'kaoshi') {
			uni.redirectTo({
				url: '/pages/client/ShouYe/shouye'
			})
		} else {
			uni.redirectTo({
				url: '/pages/client/ShouYe/shouye'
			})
		}
	}

	function initPage() {
		myApi.getMineUser().then(res => {
			const {
				gender,
				icon,
				idcard,
				realName,
				userName,
				userId
			} = res.data;
		})
	}
</script>

<style>

</style>