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

发布时间 2023-05-22 17:11:10作者: skyhxm

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

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、官网等

站点地址