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 :src="deptListurl.avatarUrl" v-if="deptListurl.avatarUrl" style="width: 100%;height: 100%;"></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>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	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.imgTypeSelect()
			},
			imgTypeSelect(val) {
				// if (val.name == '相册') {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					// sourceType: that.$helper.chooseImage.sourceType,
					success: function(res) {
						uploadImage('image', res.tempFilePaths[0], 'appData/',
							result => {
								// 上传成功
								that.$request.baseRequest('get', '/BDAccessToken/getAuth', {
										apiKey: 'yNWLRW6unoUxo2KXiCZxOxGS',
										secretKey: 'E8hqzKWdFdTGnFnpAwZ7ixtL89SN3deR'
									}).then(res => {
										that.$request.baseRequest('post',
												'/commonUser/getUserDefinedBean', {
													accessToken: res.data,
													imagePath: result
												}).then(res1 => {
												that.deptListurl.avatarUrl = result
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
									})
									.catch(res => {
										uni.$u.toast(res.message);
									});
							}
						)
					}
				});

				// } else {
				// 	uni.chooseImage({
				// 		count: 1,
				// 		sourceType: ['camera'],
				// 		success: function(res) {
				// 			console.log(JSON.stringify(res.tempFilePaths));
				// 			uploadImage(res.tempFilePaths[0], 'appData/',
				// 				result => {
				// 					// 上传成功
				// 					console.log('图片地址', result)
				// 					that.$request.baseRequest('get', '/BDAccessToken/getAuth', {
				// 							apiKey: 'yNWLRW6unoUxo2KXiCZxOxGS',
				// 							secretKey: 'E8hqzKWdFdTGnFnpAwZ7ixtL89SN3deR'
				// 						}).then(res => {
				// 							console.log(res)
				// 							that.$request.baseRequest('post',
				// 									'/commonUser/getUserDefinedBean', {
				// 										accessToken: res.data,
				// 										imagePath: result
				// 									}).then(res1 => {
				// 									that.deptListurl.avatarUrl = result
				// 								})
				// 								.catch(res => {
				// 									uni.$u.toast(res.message);
				// 								});
				// 						})
				// 						.catch(res => {
				// 							uni.$u.toast(res.message);
				// 						});
				// 				}
				// 			)
				// 		}
				// 	});
				// }
			},
			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
									});
									that.$refs.uToast.show({
										type: 'success',
										message: "修改成功！",
									})
									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>