最近在开发微信小程序,为了避免用户头像上传过大,导致资源浪费,添加了头像剪裁的功能
使用u-View组件库中的AvatarCropper 头像裁剪
官网已经讲的很清楚了,以下是官网地址:
https://www.uviewui.com/components/avatarCropper.html
我直接用官网上的代码,发现出现了一些问题:
this.$u.route跳转无效,我就改用uniapp的uni.navigateTo,改用uni.navigateTo的话需要注意一点,原先的参数的书写方式就不行了,uni.navigateTo的参数拼接在路径后边,多个参数之间用&&隔开。
methods{
chooseAvatar() {
uni.navigateTo({
// 关于此路径,请见下方"注意事项"
url: '../../u-avatar-cropper/u-avatar-cropper?rectWidth='+200+'&&destWidth='+200+'&&fileType='+'jpg',
})
},
}
created() {
// 监听从裁剪页发布的事件,获得裁剪结果
uni.$on('uAvatarCropper', path => {
let token = uni.getStorageSync("token");
this.avatar = path;
// 可以在此上传到服务端
uni.uploadFile({
url: baseUrl + '/users/updateAvatar', //图片上传地址
filePath: path,
name: 'avatar',
header: {
Authorization: token
},
complete: (res) => {
console.log(res);
}
});
})
},