项目头像编辑功能理论需要使用upload组件,但是发现upload组件只能限制上传数量,想覆盖上传需要重新二次封装去增减上传列表比较麻烦,正好vk-uview-ui 组件有头像裁剪功能并能监听裁剪回传blod二进制格式,所以考虑还是使用 AvatarCropper 头像裁剪插件
使用会遇到些问题
文档说插件方式能直接在page.json 配置 uni_modules内的页面,我实际上配置却不行,不知道是什么原因,所以我还是采取了npm 下载的方式去配置page.json
-
首先先在pages 目录下创建目录u-avatar-cropper/index.vue (该目录可自己定义),内容从uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue 文件复制过来即可,还需要修改复制过来内容内的一些引入资源的路径
原有绝对路径替换成相对路径
- import WeCropper from '@/uni_modules/vk-uview-ui/components/u-avatar-cropper/weCropper.js';
- @import '@/uni_modules/vk-uview-ui/libs/css/style.components.scss';
-
配置pages.json页面 直接当个页面配置就行
{
"path": "pages/u-avatar-cropper/index",
"style": {
"navigationBarTitleText": "头像裁剪",
"navigationBarBackgroundColor": "#000000"
}
}
-
最后就可以直接照文档案例修改一下跳转的url对应上pages.json 配置的页面即可使用
// 裁剪头像
chooseAvatar() {
// 此为uView的跳转方法,详见"文档-JS"部分,也可以用uni的uni.navigateTo
this.$u.route({
// 关于此路径,请见下方"注意事项"
url: 'pages/u-avatar-cropper/index',
// 内部已设置以下默认参数值,可不传这些参数
params: {
// 输出图片宽度,高等于宽,单位px
destWidth: 300,
// 裁剪框宽度,高等于宽,单位px
rectWidth: 200,
// 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可
fileType: 'jpg',
}
})
},
附上我的头像编辑源码
<template>
<view class="az-container-wrap pd30 default-bg user-info pd-nv">
<view class="form">
<view class="u-avatar-wrap" @tap="chooseAvatar">
<image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
</view>
<view class="tips" @tap="chooseAvatar">
点击更换图片
</view>
<view class="name">
<u-input v-model="name" input-align="center" type="text" :border="false" />
</view>
<u-button type="primary" @click="saveInfor">保存</u-button>
</view>
<mainNavBar />
</view>
</template>
<script>
import { useUserStoreHook } from '@/stores/modules/user.js'
import { updateUserData } from '@/common/api.js'
export default {
name: 'myInfor',
data() {
return {
// fileList: []
avatar: '', // 展示头像
uploadAvatarUrl: '', // 保存提交头像路径
name: '',
}
},
computed: {
// 用户信息
userInfo() {
return useUserStoreHook().userInfo
}
},
watch: {
userInfo(n,o) {
this.fomartUrl()
}
},
mounted() {
this.fomartUrl()
},
created() {
// 监听从裁剪页发布的事件,获得裁剪结果
uni.$on('uAvatarCropper', path => {
this.avatar = path;
// 可以在此上传到服务端
uni.uploadFile({
url: uni.$baseUrl + '/common/upload',
filePath: path,
name: 'file',
jsonType: 'json',
complete: (res) => {
let data = JSON.parse(res.data)
if (data.code === 200) {
// 上传成功
this.uploadAvatarUrl = data.fileName
} else {
this.uploadAvatarUrl = ""
}
}
});
})
},
methods: {
fomartUrl() {
if (/^(http|https|ftp)\:\/\//.test(this.userInfo.avatar)) {
this.avatar = this.userInfo.avatar
} else {
this.avatar = uni.$basePic + this.userInfo.avatar
}
this.name = this.userInfo.name
},
// 裁剪头像
chooseAvatar() {
// 此为uView的跳转方法,详见"文档-JS"部分,也可以用uni的uni.navigateTo
this.$u.route({
// 关于此路径,请见下方"注意事项"
url: 'pages/u-avatar-cropper/index',
// 内部已设置以下默认参数值,可不传这些参数
params: {
// 输出图片宽度,高等于宽,单位px
destWidth: 300,
// 裁剪框宽度,高等于宽,单位px
rectWidth: 200,
// 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可
fileType: 'jpg',
}
})
},
// 保存操作
saveInfor() {
uni.showLoading()
let data = {
avatar: this.uploadAvatarUrl,
name: this.name
}
if (!data.avatar) {
delete data.avatar
}
updateUserData(data)
.then(res => {
uni.hideLoading()
if (res.code === 200) {
uni.$u.toast('保存成功')
useUserStoreHook().setUserInfo(res.data)
} else {
uni.$u.toast(res.msg)
}
}, () =>{
uni.hideLoading()
})
},
}
}
</script>
<style lang="scss" scoped>
.form{
color: #8E8E8E;
text-align: center;
::v-deep .u-upload{
justify-content: center;
.u-list-item{
border-radius: 50%;
overflow: hidden;
}
}
.tips{
margin-top: 40rpx;
margin-bottom: 90rpx;
}
.name{
margin-bottom: 84rpx;
::v-deep .u-input{
height: 108rpx;
text-align: center;
border-radius: 30rpx;
background-color: #fff;
.u-input__input{
height: 100%;
color: #8E8E8E;
}
}
}
}
.u-avatar-demo {
width: 280rpx;
height: 280rpx;
border-radius: 140rpx;
}
</style>
示例效果