uniapp开发微信小程序，实现个人头像裁剪并上传

背景

在开发微信小程序时，个人头像直接选择本地文件上传，由于图片尺寸与头像展示尺寸不匹配，导致头像会被压缩拉伸，显示失真。在uniapp插件市场搜索插件发现现有插件不太好用。

方法

方法很简单，调用了微信原生的裁剪图片接口方法wx.cropImage()，代码示例如下。

<template>
		<view class="avater">
			<image class="avater-img" :src="headAddress" @click="getImageAndUpload()"></image>
			<p>点击头像修改</p>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				headAddress: '' 
			}
		},
		methods: {
			async getImageAndUpload() {
				try {
					const chooseImageRes = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					});

					const tempFilePaths = chooseImageRes.tempFilePaths;
					if (tempFilePaths.length === 0) {
						throw new Error('没有选择图片');
					}

					const imgPath = tempFilePaths[0];

					const cropImageRes = await wx.cropImage({
						src: imgPath, // 图片路径
						cropScale: '1:1' // 裁剪比例   微信官方提供了多种裁剪比例以供选择
					});

					const cropImgPath = cropImageRes.tempFilePath;

					const token = this.$store.getters.getToken(); // 一般的上传接口都需要token校验。我这里应用了Vuex
					const uploadRes = await wx.uploadFile({
						url: config.baseURL + '/file/upload', // 你的服务器接口地址
						filePath: cropImgPath,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data',
							'Authorization': `Bearer ${token}`
						}
					});

					const data = JSON.parse(uploadRes.data);
					const {
						code,
						data: responseData,
						message
					} = data;
					
					if(code==200){
						// 头像上传成功
						console.log('头像上传成功')
					}
				} catch (error) {
					// 错误处理
					console.error(error);
					throw error;
				}
			}
		}
	}
</script>

<style lang="scss">
	
</style>

微信官方还提供了图片压缩方法，有需要的小伙伴可以去查查看官方文档。