微信小程序上传头像和昵称持久化保存

微信小程序上传头像和昵称持久化保存

1. 持久化步骤

因为通过微信头像昵称填写功能获取到头像是一个临时头像，这个url只能一段时间内在微信访问，并且无法在公网访问这个url。所以非常有必要把这个url转成我么实际可用的头像到数据库中。让头像持久化的在微信和公网任何位置都能访问。

这里我们使用url转base64字符串的方式，持久化图片成base64字符串。如果是自己上传图片还需要考虑图片大小和压缩图片的问题，这里我们直接采用微信的头像上传接口，直接帮我们快捷压缩和裁剪图片，灰常的好用。话不多说，来看代码

2. 页面效果

3. 代码实现

1. uniapp小程序

安装image-tools

npm i image-tools --save

2. 原生小程序

新建一个util工具类js。加上一个function

/**
 * 图片url链接转base64
 * @param {String} url 图片链接
 * @returns 转base64后的值或者报错信息
 */
const imgUrlToBase64 = (url) => {
  return new Promise((resolve, reject) => {
    if (!url) {
      reject('请传入url内容');
    }

    if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {
      // 图片地址
      const image = new Image();
      // 设置跨域问题
      image.setAttribute('crossOrigin', 'anonymous');
      // 图片地址
      image.src = url;
      image.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // 获取图片后缀
        const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
        // 转base64
        const dataUrl = canvas.toDataURL(`image/${ext}`);
        resolve(dataUrl || '');
      }
    } else {
      // 非图片地址
      reject('非(png/jpe?g/gif/svg等)图片地址');
    }
  });
};

2. 页面使用

1. 完善用户信息（昵称头像）弹窗

 
        
          
            
              
              
            
            {{bname}}
            邀请您补全个人信息

（昵称、头像）
            
              
                
                  
                    
                    
                  
                
                
                  
                
              
            
          
          
             拒绝
             允许
          
        
   

2. js部分

        import { pathToBase64, base64ToPath } from 'image-tools'
        //如果是原生小程序这里就import我们写的那个function。图片url转base64的
        export default {
            data() {
                return {
                    userInfoTemp:{
                        id:'',
                        name:'',
                        avatarurl:''
                    },
                customStyleUnOk: {
                    marginTop: '20rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
                    border:'none',
                    color:'gray'
                },
                customStyleOk: {
                    marginTop: '20rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
                    border:'none',
                    color:'#157DFB'
                },
                // 用户基本信息
                userInfo: null,
                // 是否弹出登录注册授权弹窗
                showAuthorizeUser: false,
        }
    },
    methods: {
      openUserSet(){
        this.userInfoTemp.id = this.userInfo.id;
        this.userInfoTemp.name = this.userInfo.name;
        this.userInfoTemp.avatarurl = this.userInfo.avatarurl;
        console.log(this.userInfoTemp)
        this.showAuthorizeUser = true;
      },
      authUser(){
        if(this.userInfoTemp.name && this.userInfoTemp.name!=''){
          if(this.userInfoTemp.avatarurl && this.userInfoTemp.avatarurl!=''){
            this.showAuthorizeUser = false;
            this.$api.saveUserInfo(this.userInfoTemp, res => {
              this.userInfo.name = this.userInfoTemp.name;
              this.userInfo.avatarurl = this.userInfoTemp.avatarurl;
              uni.setStorageSync('userInfo',this.userInfo)
              this.$interactive.toast('保存成功！')
              this.showAuthorizeUser = false;
            })
          }else{
            this.$interactive.toast('头像不能为空！')
          }
        }else{
          this.$interactive.toast('昵称不能为空！')
        }

      },
      //获取昵称输入内容
      userNameInput(e){
        this.userInfoTemp.name = e.detail.value
      },
      onChooseAvatar(e) {
        pathToBase64( e.detail.avatarUrl).then(path => {
          this.userInfoTemp.avatarurl = path
        }).catch(error => {
          console.log(error)
        })
      }
    }
}

        

3. css部分

.auth-card{
    text-align: center;
    .avatar-img{
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 100%;
        margin-top: 30rpx;
    }
    .title{
        font-size: 20rpx;
    }
    .content{
        margin-top: 10rpx;
    }
}
.avatar-wrapper{
    width: 150rpx;
    height: 100rpx;
    color: #333 !important;
    text-align: center !important;
    border: none !important;
    border-radius:0 !important;
    background-color:transparent !important;
}
.avatar-wrapper::after {
	border: none !important;
}
.auth-btncard{
    .btn-unok{
        width: 50%;
        float: left;
    }
    .btn-ok{
        width: 50%;
        float: left;
        margin: 0;
        padding: 0;
        border: 0px solid transparent;  //自定义边框
        outline: none;    //消除默认点击蓝色边框效果
        u-button{
            margin: 0;
            padding: 0;
            border: 0px solid transparent;  //自定义边框
            outline: none;    //消除默认点击蓝色边框效果
        }
    }
}