84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="change_avatar">
|
||
<u-avatar :src="avatar" size="140rpx" shape="circle" @click="changeAvatar()"></u-avatar>
|
||
</view>
|
||
|
||
<view>
|
||
<u--form labelPosition="left" :model="model">
|
||
<u-form-item label="修改昵称" prop="userInfo.name" borderBottom>
|
||
<u--input v-model="model.userInfo.name" border="none" placeholder="请输入您的昵称"
|
||
placeholderStyle="color: #CCCCCC;font-size: 24rpx;"></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
<u-button type="success" text="确定" color="#0EBB5B"></u-button>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
|
||
model: {
|
||
userInfo: {
|
||
name: ''
|
||
},
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
//修改头像
|
||
changeAvatar() {
|
||
uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
|
||
count: 1, //默认选择1张图片
|
||
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
success: (res) => {
|
||
console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
|
||
this.avatar = res.tempFilePaths[0] //更新本地浏览头像图片
|
||
// this.update(res.tempFilePaths[0]) //上传图片
|
||
}
|
||
});
|
||
},
|
||
update(filePath) {
|
||
const _this = this
|
||
const token = uni.getStorageSync('token')
|
||
const res = uni.uploadFile({
|
||
url: _this.action, //仅为示例，非真实的接口地址
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
'Authorization': token
|
||
},
|
||
success: (res) => {
|
||
// console.log(JSON.parse(res.data).data) 处理格式
|
||
this.weChatRegister({
|
||
headimg: REQUEST_BASE_URL + '/' + JSON.parse(res.data).data
|
||
}) //将真实图片地址请求给后端做修改
|
||
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.change_avatar {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 60rpx 0;
|
||
}
|
||
|
||
.u-button {
|
||
width: 644rpx !important;
|
||
height: 86rpx !important;
|
||
background: #0EBB5B;
|
||
border-radius: 20rpx !important;
|
||
margin-top: 230rpx;
|
||
}
|
||
</style>
|