uniapp图片（头像）裁剪（vue3+ksp-cropper）_uniapp 实现选择头像并裁剪功能

继上篇文章发布不到一天，有一定的反响，于是准备提笔写下h5的头像裁剪，也是前段时间产品的一个小功能，h5相对于pc的头像裁剪简单很多，不需要去转换一些文件格式，好了，准备开始吧！

使用uniapp自带的上传组件

<view class="header_img mt-32">
	<uni-file-picker class="img" limit="1" v-model="avatarList" fileMediatype="image" mode="grid"
				@select="upload" />
</view>

将插件安装到项目中，这个下载插件的官方地址https://ext.dcloud.net.cn/plugin?id=6878

我记得应该是需要手机扫码看30秒的广告才可以下载的哈哈哈

参数根据自己的需求可以自己设置，头像裁剪记得用fixed，这个是固定尺寸

下载完了之后就将代码加进项目中

<!-- 图片裁剪 -->
<ksp-cropper mode="fixed" :width="250" :height="250" :maxWidth="1024" :maxHeight="1024" :url="cropperUrl"
		@cancel="oncancel" @ok="onok"></ksp-cropper>

数据层，标签里面的  :url如果为空插件就默认不显示，有地址裁剪就会自己出来

const cropperUrl = ref('')

现在开始处理逻辑

当我们使用uniapp自带的上传图片时将cropperUrl进行赋值，头像裁剪就会出来

赋值完成后操作后点击确认onok进行裁剪，将cropperUrl置空，去调用上传的接口得到完整的地址，成功得到完整地址后再去调用修改图片（头像）地址即可。

// 选择图片
const upload = (e) => {
		const tempFilePaths = e.tempFilePaths; //e是获取的图片源
		cropperUrl.value = tempFilePaths[0]
	}
 
// 确认裁剪
const onok = (res) => {
		cropperUrl.value = ""
		uni.uploadFile({
			url: `/apis/set/upload`,
			filePath: res.base64,
			//设置请求头
			header: {
				"token": getToken()
			},
			name: 'file',
			success: res2 => {
				let data = JSON.parse(res2.data)
				if (data.code == 1) {
					// url为上传的地址
					saveAvatar({
						avatar: data.data.fullurl
					}).then(res3 => {
						if (res3.code == 1) {
							successMessage()
						} else {
							uni.showToast({
								title: res3.msg,
								icon: 'none'
							})
						}
					})
				}
 
			}
		})
	};
 
// 取消裁剪
const oncancel = (res) => {
		cropperUrl.value = "";
	};

以上就是完整的处理逻辑以及代码

完结，撒花，有任何问题请私信踢我或者评论区留言！！！！！！！！！