uni-app 使用uview上传头像组件

<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',

}

})

},

}