返回顶部
首页 > 资讯 > 精选 >微信小程序上传头像和昵称持久化保存
  • 729
分享到

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

摘要

微信小程序上传头像和昵称持久化保存 1. 持久化步骤 因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url。所以非常有必要把这个url转成我么实际可用的头像到数据库中。让头像

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

1. 持久化步骤

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

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

2. 页面效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 代码实现

1. uniapp小程序

安装image-tools

npm i image-tools --save

2. 原生小程序

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

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部分

        

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;    //消除默认点击蓝色边框效果        }    }}

来源地址:https://blog.csdn.net/qq_35921773/article/details/129106797

--结束END--

本文标题: 微信小程序上传头像和昵称持久化保存

本文链接: https://www.lsjlt.com/news/372033.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作