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

（3）选择图片，裁剪图片首先我们需要在模态框处，设置点击事件，唤起操作菜单，然后进行修改操作菜单里面的参数然后在操作菜单这个组件设置点击事件，接入uni.chooseImage这个api,接成功以后，再将将上传的图片赋值给我们定义好的变量数组，接着，我们再使用裁剪插件，监听裁剪ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView U

Miraitowa_chole

4758人浏览 · 2021-10-14 17:02:47

Miraitowa_chole · 2021-10-14 17:02:47 发布

思路：

第一步：首先需要在项目里安装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>

效果展示：