微信小程序上传头像和昵称持久化保存
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. 完善用户信息（昵称头像）弹窗
<u-modal v-model="showAuthorizeUser" :show-title="false" :show-confirm-button="false"> <view class="slot-content"> <div class="auth-card"> <div class="img"> <img class="avatar-img" :src="userInfoTemp.avatarurl" v-if="userInfoTemp.avatarurl&& userInfoTemp.avatarurl!=''" mode="widthFix"> <img class="avatar-img" v-else src="/static/logo-min.png" mode="widthFix"> </div> <div class="title">{{bname}}</div> <div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div> <div style="margin-left: 100rpx;margin-right: 100rpx"> <u-form ref="uForm"> <u-form-item label="头像"> <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right"> <image class="avatar" :src="userInfoTemp.avatarurl" v-if="userInfoTemp.avatarurl&& userInfoTemp.avatarurl!=''"></image> <image class="avatar" v-else src="/static/logo-min.png"></image> </button> </u-form-item> <u-form-item label="昵称"> <input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> </u-form-item> </u-form> </div> </div> <div class="auth-btncard"> <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div> <div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div> </div> </view> </u-modal>
2. js部分
<script> 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) }) } } } </script>
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; //消除默认点击蓝色边框效果 } } }
