wangluohuoyun-app/pages/mine/settings/editAvatar.vue

<template>
	<view class="content">
		<view @click="upload" class="picture">
			<image class="xj-image"  v-if="!deptListurl.avatarUrl" src="@/static/images/common/tianjiazhaopian@2x.png"></image>
			<image class="xj-image" :src="deptListurl.avatarUrl" v-if="deptListurl.avatarUrl"></image>
			
		</view>
			<view @click="submit" class="submit">提交</view>
		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
			@close="isShowimgType=false">
		</u-action-sheet>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
		mapState
	} from 'vuex';
	var that
	export default {
		data() {
			return {
					isShowimgType:false,
					imgSrc:'',
					deptListurl:{
						avatarUrl:'',
						id:''
					}
			}
		},
		onLoad() {
			that = this
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			upload() {
				this.isShowimgType = true
			
			},
			imgTypeSelect(val) {
				console.log(val)
				if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						sourceType: this.$helper.chooseImage.sourceType,
						success: function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							uploadImage(res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功
									console.log('图片地址', result)
								that.deptListurl.avatarUrl = result
			
								}
							)
						}
					});
			
				} else {
			
				}
			
			},
			submit(){
				this.deptListurl.id = this.userInfo.id
				this.$request.baseRequest('post', '/commonUser/editUserInfo', this.deptListurl).then(res => {
						uni.showToast({
							title: '修改成功！',
							icon: 'success',
							duration: 2000,
							success() {
								setTimeout(()=>{
									that.userInfo.avatarUrl = that.deptListurl.avatarUrl
									var _student = uni.getStorageSync('userInfo');
									_student.avatarUrl = that.deptListurl.avatarUrl;
									uni.setStorageSync('userInfo', _student);
									var name = 'userInfo';
									var value = _student;
									that.$store.commit('$uStore', {
										name,
										value
									});
									// this.$api.msg('修改成功2！')
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
				
					})
					.catch(res => {
					uni.$u.toast( res.message);
					});
			}
		}
	}
</script>

<style>
	.content{
		background: white;
		padding: 20rpx;
	}
.left-text {
			width: 290rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}
		.picture {
			margin-top: 20rpx;
			background: #F5F6FA;
			width: 212rpx;
			height: 212rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #6A7282;
		}
		.xj-image {
			width: 100rpx;
			height: 100rpx;
		}
		.submit{
			margin-top: 20rpx;
			background: #2772FB;
			border-radius: 50rpx;
			padding: 20rpx 0;
			color: white;
			text-align: center;
		}
</style>