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

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();// 转base64const 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-elsesrc="/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-elsesrc="/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;    //消除默认点击蓝色边框效果}}
}

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

微信小程序上传头像先裁剪图片后上传
我是使用we-cropper.js插件实现的,下面是实现过程: 文件结构插件we-cropper.js /*** we-cropper v1.2.0* (c) 2018 dlhandsome* @l ...
微信小程序 - 上传头像
// 上传文件 function uploadFile(url, filePath, name, formData, cb) { wx.uploadFile({ url: 'https://www.l ...
微信小程序最新获取头像和昵称的方法直接用！
调整背景微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo,2021年4月5日被废弃,原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝 ...
微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...

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

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

1. 持久化步骤

2. 页面效果

3. 代码实现

1. uniapp小程序

2. 原生小程序

2. 页面使用

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

2. js部分

3. css部分

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

最新文章

热门文章