uniApp上传图片前，裁剪图片大小

使用HBuilder插件市场中的ksp-cropper插件，结合图片上传实现

地址：ksp-cropper - DCloud 插件市场

 直接当做组件引入使用（这里ksp-cropper组件最好放在外面，不要包在其他组件里面，不然裁剪组件大小可能会受影响）

 

<ksp-cropper class="crop" mode="fixed" :width="250" :height="290" :url="currentImageUrl"
			@cancel="localDataShowCropper=false" @ok="handleCropOk" v-if="localDataShowCropper"></ksp-cropper>
		<uni-list class="container1">
			<uni-list-item v-if="imgPath" clickable showExtraIcon="true" :extraIcon="{type: 'image-filled'}"
				title="证件照">
				<template v-slot:footer>
					<view class="slot-box">
						<image :src="imgUrl+imgPath" mode="heightFix" style="height: 150rpx;width: 100rpx;" @click="chooseImg">
						</image>
					</view>
				</template>
			</uni-list-item>
			<!--  -->
			<uni-list-item v-else showArrow clickable showExtraIcon="true" :extraIcon="{type: 'image-filled'}"
				title="证件照">
				<template v-slot:footer style="width: 200rpx;">
					<view class="slot-box">
					<button type="default" @click="chooseImg">上传</button>
					</view>
				</template>
			</uni-list-item>

我这里上传没有用组件，直接用uni.chooseImage的，用组件应该也可以

chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						let chooseImgpic = res.tempFilePaths[0]
						this.select(chooseImgpic)
					},
				})
			},
			select(e) {
				if (typeof e === 'object') {
					const tempFilePaths = e.file[0].url;
					if (tempFilePaths && tempFilePaths.length > 0) {
						this.currentImageUrl = e.file[0].url;
						this.localDataShowCropper = true;
					}
				} else {
					this.currentImageUrl = e
					this.localDataShowCropper = true;
				}
			},
			handleCropOk(currentImageUrl) {
				let data = {
					name: 'avatarfile',
					filePath: currentImageUrl.path
				}
				uploadAvatar(data).then(res => {
					this.path = res.imgUrl
					this.submitInfo()

				})
				this.localDataShowCropper = false;
			},