wangluohuoyun-huozhuapp/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="$u.throttle(submit, 1000)" 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
				this.imgTypeSelect()
			},
			imgTypeSelect(val) {
				console.log(val)
				// if (val.name == '相册') {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					// sourceType: this.$helper.chooseImage.sourceType,
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uploadImage('image', 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: 100%;
		height: 100%;
	}

	.submit {
		margin-top: 20rpx;
		background: #F5BA3C;
		border-radius: 50rpx;
		padding: 20rpx 0;
		color: white;
		text-align: center;
	}
</style>