微信小程序使用头像昵称填写完成头像上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用头像昵称填写完成头像上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

去年微信调整了用户信息获取的api后，现在获取用户头像和昵称只能通过用户自己触发组件拿到用户信息，那到底怎么做呢，下面跟大家分享一下我是怎么做的（新手，请多多包涵，有问题欢迎指出）

微信小程序使用头像昵称填写完成头像上传

wxml：

<view class="top">
    <button class="avatar-wrapper" 
	    open-type="chooseAvatar" 
	    bind:chooseavatar="onChooseAvatar"
    >
      <image class="avatar" src="{{avatarUrl}}"></image>
    </button> 
    <van-icon name="edit"  class="edit" />
    <input type="nickname" 
	    class="weui-input"  
	    placeholder="微信用户"  
	    bind:change="getNickname" 
	    maxlength="10" 
	    value="{{username}}"/>
  </view>

js：文章来源地址https://www.toymoban.com/news/detail-507362.html

// 后端接口
import {getUserInfo,updateUserInfo,uploadPhoto} from '../api/profile/profile.js'

// 默认头像
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 默认头像
    avatarUrl: defaultAvatarUrl,
    // 用户昵称
    username:null,
    openId:null,
    userId:null
  },
  // 头像上传
  onChooseAvatar(e){
  	// 回调事件返回的是图片的临时地址，会失效，我们需要调自己的上传接口拿到图片信息渲染到页面
    console.log(e.detail);
	    let avatarUrl  = e.detail.avatarUrl
	    let openId = this.data.openId;
	    this.setData({
	      avatarUrl,
	    })
    wx.uploadFile({
      url: "http://192.168.x.xx.xxxx:/users/uploadImage",  // 这里换成你们后端的上传接口即可
      method: 'POST',
      filePath: avatarUrl,
      name: 'file',
      formData: {
        openId: openId  // 这里放你们接口所需要的参数
      },
      // 成功回调
      success:(res)=>{
        let result = JSON.parse(res.data); // JSON.parse()方法是将JSON格式字符串转换为JSON对象
        let newAvatarUrl = result.data[0].url; // 返回的图片url
        let userId = this.data.userId;
        // 将返回的url替换调默认的url，渲染在页面上
        this.setData({
          avatarUrl:newAvatarUrl  
        })
        /*
        	* 下面调保存头像信息的接口(具体实现根据你们实际开发的需求)
        */
          let fileInfo = {
            userId:userId,
            fileName:result.data[0].name,
            fileUrl:result.data[0].url,
            filePath:result.data[0].path,
          }
          uploadPhoto(fileInfo).then(res=>{
            console.log(res);
          })
      },
  });
  },
  // 用户昵称
  getNickname: function (e){
    let input = e.detail.value
    this.setData({
      username: input 
    })
    // 修改用户昵称
    let user = {
      openId: this.data.openId,
      userName: this.data.username
    }
    updateUserInfo(user).then(res=>{
      this.queryInfo();
    })
  },
  // 查询用户信息
  queryInfo(){
    let openId = wx.getStorageSync('login_info').openid
    this.setData({
      openId : openId
    })
    getUserInfo(openId).then(res=>{
      console.log('查询用户信息',res);
      if (res.data.code == 200) {
      // 将查询到用户头像、昵称等信息覆盖默认值，然后渲染到页面即可
        this.setData({
        username: res.data.data.userName,
        userId:res.data.data.userId,
        avatarUrl:res.data.data.fileUrl
      })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  // 页面加载完毕之后查询用户信息
   this.queryInfo();
  },
})