#uni-app# u-avatar-cropper实现选择图片裁剪，设置用户头像uview （附源码）

思路：

第一步：首先需要在项目里安装uView框架

》》》点击跳转uview安装教程https://blog.csdn.net/ZHENGCHUNJUN/article/details/119913012?spm=1001.2014.3001.5501https://blog.csdn.net/ZHENGCHUNJUN/article/details/119913012?spm=1001.2014.3001.5501

第二步：在page.josn里面，引入u-avatar-cropper的路径

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

第三步：排版

里面会用到唤起菜单的插件u-action-sheet （注意要放在版块外面，以免排版错乱）

》》》点击跳转到actionSheet参数

<template>
	<view>
		<view class="personal">
			<view class="title">头像</view>
			<view class="name">
				<view class="item">
					<image :src="imgsrc"></image>
				</view>
				<u-icon name="arrow-right" color="#666666" class="right-icon"></u-icon>
			</view>
		</view>
		<u-action-sheet :list="headlist" v-model="show"></u-action-sheet>
	</view>
</template>

第四步：设置点击事件，唤起操作菜单

<template>
	<view>
		<view class="personal" @click="show = true"> //触发点击事件以后，操作菜单为激活状态
			<view class="title">头像</view>
			<view class="name">
				<view class="item">
					<image :src="imgsrc"></image>
				</view>
				<u-icon name="arrow-right" color="#666666" class="right-icon"></u-icon>
			</view>
		</view>
		<u-action-sheet :list="headlist" v-model="show" @click="toCut()"></u-action-sheet>
	</view>
</template>
export default {
		data() {
			return {
				imgsrc: '/static/1.jpg',
				show: false, //操作菜单为隐藏状态
				headlist: [{ //操作菜单的参数设置
					text: '选择图片',
					color: '#666666',
					fontSize: 35
				}, ],
			}
		},
		
		}
	}
</script>

第五步：在操作菜单这个组件里，设置点击事件，进行裁剪

<template>
	<view>
	
		<u-action-sheet :list="headlist" v-model="show" @click="toCut()"></u-action-sheet>
	</view>
</template>
 
 
methods: {
			toCut() { //触发点击事件以后，跳转到裁剪头像的页面
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			}
		}

第六步：进行监听图片裁剪结果，以及传递到服务器

	created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.imgsrc = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: '', //后期自己接后端接口
					filePath: path,
					name: 'file',
					complete: (res) => {
						console.log(res);
					}
				});
			})
		},

源码展示：

<template>
	<view>
		<view class="personal" @click="show = true">
			<view class="title">头像</view>
			<view class="name">
				<view class="item">
					<image :src="imgsrc"></image>
				</view>
				<u-icon name="arrow-right" color="#666666" class="right-icon"></u-icon>
			</view>
		</view>
		<u-action-sheet :list="headlist" v-model="show" @click="toCut()"></u-action-sheet>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgsrc: '/static/1.jpg',
				show: false,
				headlist: [{
					text: '选择图片',
					color: '#666666',
					fontSize: 35
				}, ],
			}
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.imgsrc = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: '',
					filePath: path,
					name: 'file',
					complete: (res) => {
						console.log(res);
					}
				});
			})
		},
		methods: {
			toCut() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.personal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		margin: 50upx auto 35upx;
		.title {
			font-size: 30upx;
			color: #333333;
		}
		.name {
			display: flex;
			align-items: center;
			.item {
				height: 52upx;
				font-size: 22upx;
				color: #666666;
				display: flex;
				align-items: center;
				image {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
				}
			}
			.right-icon {
				padding-left: 15upx;
			}
		}
	}
</style>

效果展示：