veterans_H5/h5_web/pages/personalModify/personalModify.vue

<!-- 个人资料修改 -->
<template>
	<view>
		<u-cell-group>
			<u-cell-item title="头像修改">
				<u-upload slot="right-icon" :action="action" :custom-btn="true" :before-upload="beforeUpload"
					:multiple="false" :show-upload-list="false" :header="{
						Authorization: `Bearer ${vuex_token}`
					}" :limitType="['png', 'jpg']" @on-success="uploadSuccess">
					<u-avatar slot="addBtn" :src="avatarUrl" mode="circle" size="100"></u-avatar>
				</u-upload>
			</u-cell-item>
		</u-cell-group>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传地址
				action: this.config.uploadUrl,
				avatarUrl: ''
			}
		},
		onShow() {
			this.getMemberinfo()
		},
		methods: {
			/**
			 * 获取用户基本信息
			 */
			getMemberinfo() {
				uni.showLoading({
					mask: true,
					title: '数据请求中...'
				})
				this.$u.api.getmemberinfo().then(res => {
					if (res.code === 200) {
						this.avatarUrl = res.data.avatar;
						uni.hideLoading()
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
						uni.hideLoading()
					}
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					})
					uni.hideLoading()
				})
			},
			/**
			 * 上传组件上传触发
			 * @param {Object} index
			 * @param {Object} list
			 */
			beforeUpload(index, list) {
				uni.showLoading({
					title: '图片上传中...',
					mask: true
				})
			},
			/**
			 * 上传组件成功触发
			 * @param { Object } res
			 */
			uploadSuccess(res) {
				if (res.code === 200) {
					this.$u.api.modifyUserInfo({
						avatar: res.data.url
					}).then(res => {
						if (res.code === 200) {
							this.getMemberinfo()
							this.$refs.uToast.show({
								title: '修改成功!',
								type: 'success'
							})
							uni.hideLoading()
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
							uni.hideLoading()
						}
					}).catch(() => {
						uni.hideLoading()
						this.$refs.uToast.show({
							title: '系统异常',
							type: 'error'
						})
					})
				} else {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			}
		}
	}
</script>

<style>

</style>