uniapp vue3.0 + vk-uview-ui avatar-cropper 头像裁剪功能

项目头像编辑功能理论需要使用upload组件,但是发现upload组件只能限制上传数量，想覆盖上传需要重新二次封装去增减上传列表比较麻烦，正好vk-uview-ui 组件有头像裁剪功能并能监听裁剪回传blod二进制格式，所以考虑还是使用 AvatarCropper 头像裁剪插件

        使用会遇到些问题

        文档说插件方式能直接在page.json 配置 uni_modules内的页面，我实际上配置却不行，不知道是什么原因，所以我还是采取了npm 下载的方式去配置page.json

•         首先先在pages 目录下创建目录u-avatar-cropper/index.vue (该目录可自己定义)，内容从uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue 文件复制过来即可，还需要修改复制过来内容内的一些引入资源的路径

        原有绝对路径替换成相对路径

1. import WeCropper from '@/uni_modules/vk-uview-ui/components/u-avatar-cropper/weCropper.js';
2. @import '@/uni_modules/vk-uview-ui/libs/css/style.components.scss';

        

• 配置pages.json页面 直接当个页面配置就行

        {
            "path": "pages/u-avatar-cropper/index",
            "style": {
                "navigationBarTitleText": "头像裁剪",
                "navigationBarBackgroundColor": "#000000"
            }
        }

• 最后就可以直接照文档案例修改一下跳转的url对应上pages.json 配置的页面即可使用

                // 裁剪头像
            chooseAvatar() {
                // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
                this.$u.route({
                    // 关于此路径，请见下方"注意事项"
                    url: 'pages/u-avatar-cropper/index',
                    // 内部已设置以下默认参数值，可不传这些参数
                    params: {
                        // 输出图片宽度，高等于宽，单位px
                        destWidth: 300,
                        // 裁剪框宽度，高等于宽，单位px
                        rectWidth: 200,
                        // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
                        fileType: 'jpg',
                    }
                })
            },

附上我的头像编辑源码

<template>
	<view class="az-container-wrap pd30 default-bg user-info pd-nv">
		<view class="form">
			<view class="u-avatar-wrap" @tap="chooseAvatar">
				<image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
			</view>
			<view class="tips" @tap="chooseAvatar">
				点击更换图片
			</view>
			<view class="name">
				<u-input v-model="name" input-align="center" type="text" :border="false" />
			</view>
			<u-button type="primary" @click="saveInfor">保存</u-button>
		</view>
		<mainNavBar />
	</view>
</template>

<script>
	import { useUserStoreHook } from '@/stores/modules/user.js'
	import { updateUserData } from '@/common/api.js'
	export default {
		name: 'myInfor',
		data() {
			return {
				// fileList: []
				avatar: '', // 展示头像
				uploadAvatarUrl: '', // 保存提交头像路径
				name: '',
			}
		},
		computed: {
			// 用户信息
			userInfo() {
				return useUserStoreHook().userInfo
			}
		},
		watch: {
			userInfo(n,o) {
				this.fomartUrl()
			}
		},
		mounted() {
			this.fomartUrl()
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: uni.$baseUrl + '/common/upload',
					filePath: path,
					name: 'file',
					jsonType: 'json',
					complete: (res) => {
						let data = JSON.parse(res.data)
						if (data.code === 200) {
							// 上传成功
							this.uploadAvatarUrl = data.fileName
						} else {
							this.uploadAvatarUrl = ""
						}
					}
				});
			})
		},
		methods: {
			fomartUrl() {
				if (/^(http|https|ftp)\:\/\//.test(this.userInfo.avatar)) {
					this.avatar = this.userInfo.avatar
				} else {
					this.avatar = uni.$basePic + this.userInfo.avatar
				}
				this.name = this.userInfo.name
			},
			// 裁剪头像
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'pages/u-avatar-cropper/index',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			// 保存操作
			saveInfor() {
				uni.showLoading()
				let data = {
					avatar: this.uploadAvatarUrl,
					name: this.name
				}
				if (!data.avatar) {
					delete data.avatar
				}
				updateUserData(data)
				.then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.$u.toast('保存成功')
						useUserStoreHook().setUserInfo(res.data)
					} else {
						uni.$u.toast(res.msg)
					}
				}, () =>{
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		color: #8E8E8E;
		text-align: center;
		::v-deep .u-upload{
			justify-content: center;
			.u-list-item{
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.tips{
			margin-top: 40rpx;
			margin-bottom: 90rpx;
		}
		.name{
			margin-bottom: 84rpx;
			::v-deep .u-input{
				height: 108rpx;
				text-align: center;
				border-radius: 30rpx;
				background-color: #fff;
				.u-input__input{
					height: 100%;
					color: #8E8E8E;
				}
			}
		}
	}
	

	.u-avatar-demo {
		width: 280rpx;
		height: 280rpx;
		border-radius: 140rpx;
	}
</style>

示例效果