uni-zhihuikuangshan/pages/my/personal_information/upload_avatar/upload_avatar.vue

<template>
    <view>
        <okingtz-cropper @uploadSuccess="uploadSuccess"></okingtz-cropper>
    </view>
</template>

<script>
  //  1.引入项目
  import OkingtzCropper from '@/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper'
  export default {
        components:{
            //2.使用组件
            OkingtzCropper
        },
		data() {
			return {
				base_url: "",
				info:{}
			};
		},
		onLoad(option) {
			this.base_url = option.base_url
			
			// 获取个人信息
			this.$api.user_getUinfo({
				staff_num: uni.getStorageSync('user').staff_num
			}).then((res) => {
				this.info = res.data.data
			})
		},
        methods: {
            // 3.定义自己的回调函数
            uploadSuccess(tempFilePath){
                uni.showLoading({
                	mask:true
                })
                // 4.根据自己的业务场景处理tempFilePath ;接口保存，或者上传至云空间
							
                console.log('tempFilePath_->',tempFilePath)
				
				uni.uploadFile({
					url: this.base_url + "/worksheet/design/up_images",
					header: {
						'Authorization': uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
					},
					filePath: tempFilePath,
					name: 'file',
					// formData只有H5存在
					formData: {
						image: tempFilePath
					},
					success: (uploadFileRes) => {
						
						console.log(JSON.parse(uploadFileRes.data));
				
						const data = JSON.parse(uploadFileRes.data).data
				
						if (!this.info.avatar) {
							this.info.avatar = data.path
						} else {
							this.info.avatar = data.path
						}
				
						console.log(this.info.avatar)
				
						this.$api.user_updateUserMessage({
							avatar: this.info.avatar
						}).then((res) => {
							console.log(res)
							
							uni.hideLoading()
							
							uni.showToast({
								icon: "none",
								title: "更换成功"
							})
							
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
							
						})
						
						
					}
				})
            }
        }
    }
</script>