微信小程序头像上传(二---完结)

效果展示:

(1) : "点击登录"

(2) : 登录后，会显示默认的微信头像与昵称

(3) : 再次点击头像可以选择一张图片当头像，( 真实环境可以选择相册图片或拍摄一张 )

(1) : 确认选择的图片后会更新到页面中，并且下次登录也会显示上一步中选择的图片，而不会选择微信默认头像

核心代码:

  data: {avatar:"cloud://dali-0g6b7tgv130be7a2.6461-dali-0g6b7tgv130be7a2-1313283782/1.jpg",nickname:'点击登录',isLogin:false},/** 更换头像 */changeAvatar(){// wx.chooseImage({//   count: 1,// }).then(res=>{//     console.log(res);//     this.setData({//         avatar:res.tempFilePaths[0]//     })// })wx.chooseMedia({count: 1,mediaType:['image']}).then(res=>{this.setData({avatar: res.tempFiles[0].tempFilePath})// 把图片上传到云端wx.cloud.uploadFile({cloudPath: 'a' + Math.random() + '.jpg',filePath:res.tempFiles[0].tempFilePath}).then(uploadRes=>{console.log(uploadRes);let fileID = uploadRes.fileID;// 把图片与当前用户ID 绑定在一起, 存入云数据库let openid = getApp().globalData.openid;// 更新数据库中的头像路径let db = wx.cloud.database();db.collection('users').where({_openid : openid}).update({data:{avatar: fileID}}).then(updateRes=>{console.log(updateRes);})})})},/** 点击头像后的操作 */tapAvatar(){if(this.data.isLogin){   //已登录, 执行选择图片更换头像this.changeAvatar();}else{      //未登录, 则执行登录wx.getUserProfile({lang:"zh_CN",desc: '您的信息将用于登录小程序',}).then(res=>{console.log(res);// 去云函数获取openid, 然后通过openid查询云数据库, 验证是否已注册wx.cloud.callFunction({name:'login'}).then(loginRes=>{let openid = loginRes.result.openid;getApp().globalData.openid = openid;// 通过openid查询云数据库, 验证是否已注册let db =  wx.cloud.database();db.collection('users').where({_openid : openid}).get().then(queryRes=>{console.log(queryRes);if(queryRes.data.length != 0){ //已经注册过了this.setData({avatar:queryRes.data[0].avatar ,nickname: queryRes.data[0].nickName,isLogin:true})}else{  //没有注册过, 第一次登录, 则执行注册//  插入数据库db.collection('users').add({data: {avatar:res.userInfo.avatarUrl,nickname:res.userInfo.nickName}})this.setData({avatar:res.userInfo.avatarUrl ,nickname:res.userInfo.nickName ,isLogin:true})}})})})    }},

补充： 云数据库创建了users集合，云存储wx.cloud.uploadFile , 云函数就是使用默认创建的( 因为要获取到openid ) , 这篇文章哪里还不足的话，希望路过的大神指点指点小弟。

微信小程序头像上传(二---完结)相关推荐

微信小程序头像上传(一)
记录一下自己实现微信小程序头像上传的过程. wxml部分( 用了vant组件库 ): <view class="info"><van-imageroundwidt ...
微信小程序头像上传+（C#）服务端接收
第一步:样式设置(WXSS) 说明:.imagesize给view使用,.avatar给image使用.作用是把图片显示为圆形. .imagesize{display:flex; justify-co ...
Uni-app 微信小程序头像上传
uni-app 提供了很多图片处理的Api,比如 uni.chooseImage()方法,但基本都是本地.拍照上传,本地临时.持久存储,要想跟服务端交互,就需要使用上传Api uni.uploadFi ...
小程序头像上传成功但是小程序码没更新
微信小程序头像上传了,但是小程序码没更新怎么处理? 如图: 小程序头像上传成功,但是小程序码没更新,是不是让你怀疑人生? 其实不用怀疑,退出登录,重新登录就行了重新登录后,就可以刷新出新的小程序码图 ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
微信小程序：上传的图片显示旋转问题
问题? 开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关. 小程序的页面实用webview渲染的,webvie ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...

微信小程序头像上传(二---完结)

微信小程序头像上传(二---完结)相关推荐

最新文章

热门文章