uniapp获取微信小程序头像并上传(前后端代码)

最新推荐文章于 2025-05-23 09:25:59 发布

原创

最新推荐文章于 2025-05-23 09:25:59 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

背景

在uniapp实现微信小程序登陆过程中，我们提供了用户获取自己的头像功能。但是微信获取的头像都是临时路径。
需要我们进行转换并上传。

本文记录从前后端如何完成这个头像获取，上传到服务器的过程。

//这个就是微信的临时头像路径
wxfile://tmp_7ed9bdc04c06492467367ab021d68d46.jpg

uniapp代码

template页面

<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
    <image class="avatar" :src="defaultAvatar" mode="aspectFit"></image>
    <input name="avatar" :value="defaultAvatar" style="display: none;"/>
</button>

script代码

onChooseAvatar(e) {
    console.log('微信头像信息', e)
    // 将数据赋值
    const { avatarUrl } = e.detail 
    let tmpFilePath = avatarUrl;
    // this.defaultAvatar = avatarUrl

    //对临时图片链接进行base64编码
    var avatarUrl_base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(tmpFilePath, 'base64')
    var reqData = {
        "base64