1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <template>
| <view class="wrap">
| <view class="u-avatar-wrap">
| <image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
| </view>
| <u-button @tap="chooseAvatar">进入裁剪页</u-button>
| </view>
| </template>
|
| <script>
| let _this = {}
| export default {
| name:"avatarCropper",
| data() {
| return {
| avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
| };
| },
| created() {
| _this = this
| // 监听从裁剪页发布的事件，获得裁剪结果
| uni.$on('uAvatarCropper', path => {
| this.avatar = path;
| // 可以在此上传到服务端
| uni.uploadFile({
| url: 'http://39.96.92.240:8099/user/updateImg',
| filePath: path,
| name: 'img',
| complete: (res) => {
| console.log(res);
| }
| });
| })
| },
| 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',
| }
| })
| },
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .wrap {
| padding: 40rpx;
| }
|
| .u-avatar-wrap {
| margin-top: 80rpx;
| overflow: hidden;
| margin-bottom: 80rpx;
| text-align: center;
| }
|
| .u-avatar-demo {
| width: 150rpx;
| height: 150rpx;
| border-radius: 100rpx;
| }
| </style>
|
|
