微信小程序新版头像昵称上传

官方文档：小程序用户头像昵称获取规则调整公告 | 微信开放社区

头像昵称填写 | 微信开放文档

为我们小程序写了一个头像昵称上传的组件总结了下

需要注意的点：

1. 我们后端服务器存的老用户的头像昵称有的是：之前早版本（wx.getUserInfo ）能获取到的用户真实微信头像昵称，和 后面改版（wx.getUserProfile）之后获取的默认灰色头像微信用户的头像昵称所以我们做了一个判断当前用户是否有头像昵称以及是否是默认的微信用户灰色头像的判断（根据自己业务需要）；

1. 小程序input组件获取的头像是本地的临时地址，所以要想下次进入小程序依然能取到之前上传的投下给你需要服务器来保存；

1. wx.uploadFile上传的图片地址是图片本地的地址（不能是服务器的http地址），api会把本地图片的地址转化成流的形式传给你所给的服务器地址

关键部分代码

<!--components/avatarNicknameModal/avatarNicknameModal.wxml-->
<view class="out-wrapper" wx:if="{{showAvaModal}}" style="top: 0px">
    <view class="inner-wrapper">
        <view class="apply-info-tit">
          <image  src="https://xxxxxxx.com/xxxx/pics/miniproStage3/ava_nicklogo.png"></image>
          <view class="text">xxxxxxxx 申请</view>
        </view>
        <view class="which-info">获取你的昵称、头像</view>
        <view class="use-info">注册、登录小程序</view>
        <!--index.wxml-->
        <view class="get-info-wrapper">
          <view class="avatar-wrapper">
              <view class="avatar-text">头像</view>
              <button class="avatar-btn" plain open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
                        <view wx:if="{{!isChoosePhoto && (isForceUpload || !avatarUrl)}}">点此获取头像</view>
                      <image wx:else class="avatar" src="{{avatarUrl}}"></image>
                    <van-icon name="arrow" class="icon-right"></van-icon>
                </button>
            </view>
            
            <form catchsubmit="formSubmit" class="nickname-wrapper">
                <view class="row">
                    <view class="text1">昵称</view>
                    <input wx:if="{{isForceUpload || !nickName}}" type="nickname" bindblur="bindblur"  class="nickname-input" name="nickname" placeholder-class="placeholder-nickname-style" placeholder="点此获取昵称"/>
                    <input wx:else type="nickname" bindblur="bindblur" value="{{nickName}}" class="nickname-input" name="nickname" />
                </view>
                <view class="submit-btn">
                    <view class="cancel-btn" bindtap="closeModalTap">取消</view>
                        <view class="sure-btn" bindtap="setBtnTap">确定</view>
                </view>
            </form>
        </view>

    </view>
</view>

// components/avatarNicknameModal/avatarNicknameModal.js
const { uploadAvatar } = require('../../utils/utils')
const config = require('../../config')
// const request = require('../../utils/request')
const wxLogin = require('../../utils/auth')
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示上传头像昵称的弹窗
    showAvaModal: {
      type: Boolean,
      value: false,
    },
    // 如果是微信默认用户必须强制授权
    isForceUpload: {
      type: Boolean,
      value: false
    },
    avatarUrl: {
      type: String,
      value: ''
    },
    nickName: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isChoosePhoto: false, // 记录用户选择头像
  },
  observers: {
  },
  lifetimes: {
    attached: function() {
    },
    ready: function() {
      // 在组件在视图层布局完成后执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 阻止页面滑动
     */
    catchtouchmove() {},

    /**
     * 选择头像返回信息监听  获取的图片地址虽然是http开头的但也是本地的一个临时地址
     */
    onChooseAvatar(res) {
      const avatarUrl = res.detail.avatarUrl
      this.setData({
        avatarUrl: avatarUrl,
        isChoosePhoto: true
      })
      console.log(this.data.avatarUrl)
    },

    /** 获取昵称信息 */
    bindblur(res) {
      const value = res.detail.value
      this.data.nickName = value
    },

    /**
     * 设置信息按钮点击监听
     */
    async setBtnTap() {
      const {
        avatarUrl,
        nickName
      } = this.data
      if(!avatarUrl) {
        wx.showToast({
          title: '头像不能为空',
          icon: 'none'
        })
        return
      }
      if(!nickName) {
        wx.showToast({
          title: '昵称不能为空',
          icon: 'none'
        })
        return
      }
      try {
        // 刷新一次登录态
        await wxLogin()
        const wxLoginstate = wx.getStorageSync('loginSessionId');
        const openId = wx.getStorageSync('openId');
        const url = `${config().host}${config().fileUploadPic}?LsessionId=${wxLoginstate}`
        // (xxxxxxxxxx.com)，(xxxxxxxxxuat.com)我们服务器的地址，如果他点开了上传头像昵称的面板，又点击了保存，上传的是我们服务器的图片地址，wx.upLoad会返回服务器异常
        if(/(xxxxxxxxxx.com)/.test(avatarUrl) ||
         /(xxxxxxxxxuat.com)/.test(avatarUrl)) {
          this.imgUrl = avatarUrl
        } else {
          this.imgUrl = await uploadAvatar(url, avatarUrl, openId)
        }
      } catch(err) {
        console.log(err)
      }
      this.triggerEvent("handleSetAvaNickData", {
        avatarUrl,
        nickName,
        imgUrl: this.imgUrl
      })
    },
    /**
     * 关闭弹窗
     */
    closeModalTap() {
      this.setData({
        showAvaModal: false
      })
      this.triggerEvent("handleCloseAvaNickPop")
    },
  }
})

// uploadfile  头像图片上传转换格式
function uploadAvatar(url, filePath, openid) {
  wx.showLoading({
    title: '图片上传中...'
  })
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: url,// 后端服务器地址
      filePath: filePath, //图片的本地地址 
      header: {
        "content-type": "multipart/form-data"
      },
      name: 'file',
      formData: {
        'openId': openid
      },
      success(res) {
          let data = res.data
          if(data) {
            data = JSON.parse(data)
          }
          setTimeout(function () {
            wx.hideLoading()
          }, 0)
          resolve(data?.data)
      },
      fail(err) {
          reject(err)
      }
    })
  })
}
// 判断用户是否使用的默认头像或者头像为空
// 使用组件的父组件有可能能用到这个函数
function checkDefaultAvatar(url, name) {
  // 微信用户昵称  其默认头像
  // https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132
  if(!url) return true;
  if(!name) return true;
  const check1 = /(POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg)/.test(url)
  //const check2 = /(telmall\/pics\/eMallRedesign\/defaultAvatar)/.test(url)
  const checkName = name === '微信用户' ? true : false
  if((check1) && checkName) return true;
  return false;
}

实现成果截图