uni-app点击选择微信头像并使用uni.uploadFile上传到服务器

微信头像功能在开发中是常见的需求项,特别是在微信小程序经常需要获取微信头像来设置基础信息。

那么我们如何在微信小程序中来获取到微信的头像信息呢?

本篇就来介绍使用uni-app获取微信头像并上传到服务器上,代码如下:

页面中点击调用微信头像

<button open-type="chooseAvatar" class="upload_img" @chooseavatar="uploadimg">上传</button>

open-type开放能力常见参数

    share:触发用户转发

    getUserInfo:获取用户信息,可以从@getuserinfo回调中获取到用户信息 微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序

    contact:打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 微信小程序、百度小程序、快手小程序、抖音小程序

    getPhoneNumber:获取用户手机号,可以从@getphonenumber回调中获取到用户信息 微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。App平台另见一键登陆

    openSetting:打开授权设置页 微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序

    chooseAvatar:获取用户头像,可以从@chooseavatar回调中获取到头像信息 微信小程序2.21.2版本+

    login:登录,可以从@login回调中确认是否登录成功 百度小程序3.230.1版本+

js文件中uploadimg方法上传微信头像

uploadimg:function(e){
let _this = this
console.log(e)
uni.uploadFile({
url: '服务器上传接口',
filePath: e.detail.avatarUrl,
name: 'iFile',
formData: {},
success: (uploadFileRes) => {
}
});
}

uni.uploadFile中name为后端代码定义name值,需根据实际情况进行设置。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!