uniapp微信小程序昵称和头像更新

问题：微信小程序更新昵称和头像

1.昵称更新

前端：

　　

<input class="font_1 text_2 tex" v-model="nickname" type="nickname" @blur="bindblur" placeholder-style="color:#fff" placeholder="编辑资料" @input="bindinput">


bindblur(e) {
    // 获取微信昵称
    // console.log('nickName', e)
    this.nickName = e.detail.value;
    this.user.nick_name = this.nickName
    this.$http.post('nickname', {
    nick_name: this.nickName
}).then(res => {
    uni.showToast({
        icon: 'none',
        title: res.data.msg
    })
}).catch(err => {

})
},
bindinput(e) {
    // console.log('nickName', e)
    //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
    this.nickName = e.detail.value;
},

　　

laravel 后端：

　　

    /**
     * 更新用户昵称
     */
    public function nicknameUp(Request $request)
    {
        $nickName = $request->input('nick_name');
        $uid = $this->getUserId();
        $WuserModel = new WuserModel;
        $res = $WuserModel->upUser($uid, $nickName);

        return $this->success('更新成功', $res);
    }

2.头像：

　　前端：

　　　　

<button class="btn" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">

    <image class="w-shrink-0 image_2 pos_2" src="/static/my/56edcf376bd1281b9727f9dfb9e4067f.png"
        v-show="!user.head_img" />
    <image class="w-shrink-0 image_2 pos_2" :src="user.head_img" v-show="user.head_img" />
</button>


onChooseavatar(e) {
    this.avatarUrl = e.detail.avatarUrl;
    this.user.head_img = this.avatarUrl
    this.$http.upload('headimg', {
        filePath: e.detail.avatarUrl, // 要上传文件资源的路径。
        // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
        custom: {
            auth: true
        }, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
        name: 'avatarUrl', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
        // 返回当前请求的task, options。请勿在此处修改options。非必填
        getTask: (task, options) => {
            task.Update((res) => {
                if (res.progress > 50) {
                    uploadTask.abort();
                }
            });
        }
    }).then(res => {
        // 返回的res.data 已经进行JSON.parse
    }).catch(err => {

    })
},

　

laravel后端：

　　

/**
    * 更新用户头像
    */
public function headpicUp(Request $request)
{
    $uid = $this->getUserId();
    $request->file('avatarUrl');
    if ($request->hasFile('avatarUrl') && $request->file('avatarUrl')->isValid()) {
        $filename = $uid . '.' . $request->file('avatarUrl')->extension();
        $request->file('avatarUrl')->move('./uploads/avatar', $filename);
    }
    $avatar = env('APP_URL') . '/uploads/avatar/' . $filename . '?time=' . time();
    $WuserModel = new WuserModel;
    $res = $WuserModel->upUser($uid, '', $avatar);

    return $this->success('更新成功', $res);
}

　　

项目介绍

　　　　基于ThinkPHP6.0和layui的快速开发的后台管理系统。

　　　　支持php8.0版本

　　　　技术交流QQ群：533738074 加群请备注来源：如gitee、github、官网等。

站点地址

　

 

　　

　　

posted @ 2023-05-22 17:00  skyhxm  阅读(891)  评论(0)    收藏  举报