置顶微信小程序头像昵称实战篇精选热门

2022-08-25

api文档地址:  https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

目前的api变更后,得到的地址为 临时地址, 这个是文档没有说明的, 最佳实践,是需要把得到的地址上传到自己的服务器,然后用服务器返回的地址作为 真实头像的永久地址.

核心点说明:

//获取到api返回的新地址路径
            onChooseAvatar(e) {
                  this.avatarUrl = e.detail.avatarUrl
                  console.log('e.detail', e.detail)
                 // this.updateUserInfo();
                  this.uploadFile();
                },
            
            
            
            /* 上传 头像 转 话格式*/
                uploadFile(){
                  uni.uploadFile({
                    url: config.webUrl + '/upload/uploadImages',//后台接口
                    filePath: this.avatarUrl,// 上传图片 url
                    name:'image',
                   // formData: this.formData,
                    header: {
                      'content-type': 'multipart/form-data',
                      'token': uni.getStorageSync('token')
                    }, // header 值
                    success: res => {
                      let obj = JSON.parse(res.data)
                      console.log('obj', obj)
                      if (obj.code == 1) {
                       let imgUrl = obj.data.full_path;
                       this.userImg = imgUrl;
                        this.updateUserInfo();
                      } else {
                        uni.showToast({
                          icon: 'none',
                          title: '图片太大，请重新选择！'
                        });
                      }
                    },
                    fail: e => {
                      this.$toast('上传失败')
                    }
                  });
                },
            

这里需要注意, wx.uploadFile 返回的是字符串类型,需要前端自己处理一下数据结构:

完整代码如下:

            
            import config from "@/common/config.js";
            import {debounce} from '@/utils/debounce.js'
            export default {
              data() {
                return {
                  defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
                  avatarUrl: '',
                  nick_name: '',
                  userImg: '',
                }
              },
            
              onLoad() {
                let userInfo = uni.getStorageSync('userInfo') || {};
                let { nick_name,img_url } = {...userInfo};
                this.userImg = img_url;
                this.nick_name = nick_name;
              },
              methods: {
                onChooseAvatar(e) {
                  this.avatarUrl = e.detail.avatarUrl
                  console.log('e.detail', e.detail)
                 // this.updateUserInfo();
                  this.uploadFile();
                },
            
            
            
                inputWord: debounce(function(e){
                  this.nick_name = e.detail.value
                  console.log('this.nick_name.length',this.nick_name.length)
                  let str = this.nick_name.trim();
                  if(str.length==0){
                    this.$toast('请输入合法的昵称')
                    return
                  }
                  if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){
                    this.$toast('请输入中英文和数字')
                    return
                  }
                  this.updateUserInfo()
                }, 1500),
            
            
                /* 上传 头像 转 话格式*/
                uploadFile(){
                  uni.uploadFile({
                    url: config.webUrl + '/upload/uploadImages',//后台接口
                    filePath: this.avatarUrl,// 上传图片 url
                    name:'image',
                   // formData: this.formData,
                    header: {
                      'content-type': 'multipart/form-data',
                      'token': uni.getStorageSync('token')
                    }, // header 值
                    success: res => {
                      let obj = JSON.parse(res.data)
                      console.log('obj', obj)
                      if (obj.code == 1) {
                       let imgUrl = obj.data.full_path;
                       this.userImg = imgUrl;
                        this.updateUserInfo();
                      } else {
                        uni.showToast({
                          icon: 'none',
                          title: '图片太大，请重新选择！'
                        });
                      }
                    },
                    fail: e => {
                      this.$toast('上传失败')
                    }
                  });
                },
            
            
            
                updateUserInfo(){
                  let self = this;
                  uni.showLoading({});
                  let params = {
                    img_url: this.userImg,
                    nick_name: this.nick_name.trim(),
                  }
                  self.$http.post('updateUserInfo', params).then(res => {
                    uni.hideLoading()
                    if (res.data.code == 1) {
                      self.$toast('修改成功!')
                    }else {
                      self.$toast(res.data.msg)
                    }
            
                  })
                },
            
              }
            }
            
            
            
            

实际效果图: