<view class="avatar">
<view class="wrap">
<view class="u-avatar-wrap">
<image class="u-avatar-demo" :src="avatar" mode="aspectFill" @tap="chooseAvatar"></image>
</view>
<view class="atext">
点击图片上传头像
</view>
</view>
</view>
created() {
// 监听从裁剪页发布的事件，获得裁剪结果
uni.$on('uAvatarCropper', path => {
this.avatar = path
uni.uploadFile({
url: `url`,
filePath: this.avatar,
name: 'file',
method: 'POST',
header: {
'token': '111'
},
complete: (res) => {
let respons = JSON.parse(res.data)
}
});
})
},
methods: {
// 头像剪裁
chooseAvatar() {
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
this.$u.route({
// 关于此路径，请见下方"注意事项"
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
// 内部已设置以下默认参数值，可不传这些参数
params: {
// 输出图片宽度，高等于宽，单位px
destWidth: 300,
// 裁剪框宽度，高等于宽，单位px
rectWidth: 200,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg',
}
})
},
}
