xingmingyi_applet/pages/user/set/setImg.vue

<template>
	<view class="content">
		<view @click="editImg" class="headbox dffd">
			<image :src="userInfo.userInfo.avatar" mode=""></image>
			<text class="promain">更改头像</text>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { pathToBase64 } from '@/common/tool/pathToBase64.js';
export default {
	data() {
		return {
			head_img: ''
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	onLoad() {},
	methods: {
		//上传头像
		upload(id) {
			this.$api
				.request('user/changeAvatar', {
					avatar: id || ''
				})
				.then(data => {
					this.$api.toast(data.msg);
					if (data.code == 200) {
						setTimeout(res => {
							this.$store.dispatch('getUserInfo');
						}, 800);
					} else {
					}
				});
		},
		//修改头像
		editImg() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					console.log(res);
					var imageSrc = res.tempFilePaths[0];
					pathToBase64(imageSrc).then(base64 => {
						that.$api
							.request('common/doupload', {
								imgdata: base64
							})
							.then(res => {
								if (res.code == 200) {
									that.upload(res.data.img_id);
								} else {
									that.$api.toast(res.msg);
								}
							});
					});
				}
			});
		}
	}
};
</script>
<style lang="scss">
.content {
	min-height: 100vh;
	padding-top: 100rpx;
	background-color: #fff;
	.headbox {
		align-items: center;
		image {
			width: 421rpx;
			height: 421rpx;
			background-color: #fefacb;
			border-radius: 50%;
			margin-bottom: 167rpx;
		}
		.promain {
			width: 307rpx;
			height: 65rpx;
			line-height: 65rpx;
			text-align: center;
			background: #0bb291;
			border-radius: 33rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}
}
</style>