mdapp/pages/user/setting/avatar.vue

<template>
	<view>
		<!-- 头像裁剪 -->
		<okingtz-cropper
			@uploadSuccess="uploadSuccess"
			selectButtonBackgroundColor="#2080f0"
			saveButtonBackgroundColor="#2080f0"
			:image="avatar"
		></okingtz-cropper>
	</view>
</template>
<script>
import OkingtzCropper from '@/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper';
export default {
	components: {
		OkingtzCropper
	},
	data() {
		return {
			avatar: '/static/logo.png' // 头像地址
		};
	},
	onLoad() {
		const userInfo2 = uni.getStorageSync('MD_userInfo2')
		this.avatar = userInfo2.avatar
	},
	methods: {
		// 头像
		uploadSuccess(tempFilePath) {
			let token = uni.getStorageSync('MD_token') || ''
			uni.uploadFile({
				url: uni.baseUrl + 'api/upload/cloud',
				filePath: tempFilePath,
				name: 'upload',
				formData: {
					'token': token
				},
				success: (res) => {
					const cData = JSON.parse(res.data)
					this.avatar = cData.data.url
					uni.api.base.apiuseredit({
						avatar: this.avatar
					}).then(res => {
						uni.api.base.apiuserinfo().then(res => {
							uni.setStorageSync('MD_userInfo2', res)
						})
						uni.$msgConfirm('编辑成功', () => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, () => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						})
					})
				}
			});
			// uni.api.base.apiuploadcloudpiv({
			// 	upload: tempFilePath
			// }).then(res => {
			// 	console.log(res)
			// })
			// 上传至 unicloud云储存
			// vk.callFunctionUtil.uploadFile({
			// 	title: '上传中...',
			// 	filePath: tempFilePath,
			// 	suffix: 'png', // 不传suffix会自动获取，但H5环境下获取不到后缀，但可以通过file.name 获取
			// 	success(res) {
			// 		// 上传成功
			// 		vk.userCenter.setAvatar({
			// 			data: {
			// 				avatar: res.url
			// 			},
			// 			success: function(data) {
			// 				// 成功后的逻辑
			// 				let currentTime = Date.parse(new Date()) / 1000; // 秒级
			// 				console.log(currentTime);
			// 				vk.vuex.set('$user.history.lastEditAvatarTime', currentTime); // 写入缓存
			// 				vk.alert('头像设置成功', '提示', '确定', function() {
			// 					// 点击确定按钮后的回调
			// 					vk.navigateToHome();
			// 				});
			// 			}
			// 		});
			// 	}
			// });
		}
	}
};
</script>
<style></style>