微信小程序上传头像的临时路径，持久化保存到服务器与数据库（nodejs后台开发）

原创

已于 2024-12-13 14:11:18 修改 · 1.7w 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #服务器 #数据库 #node.js #小程序 #notepad++

于 2023-07-01 19:45:47 首次发布

从微信小程序中返回的用户头像临时地址 http://tmp/H0GP7BW5HTQs846c0d9deef32d42f2203340efc4a5c3.jpeg 会失效，且只能一段时间内在微信访问，并且无法在公网访问用户头像临时地址avatarUrl。

所以需要将临时地址avatarUrl转成实际可用的地址保存到mysql数据库的wxusers表的avatarUrl列中，同时将新的图片路径保存到服务器的./public/upload目录下。

一开始我是这么写的：

微信小程序通过授权获取用户头像的wxml代码如下

<view class="btnavatar">
    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"  value='{
  
  {avatarUrl}}'>
   <view>
    <image class="avatar" src="{
  
  {avatarUrl}}"></image>
   </view>
  </button>
</view>

对应的微信小程序TS代码如下

onChooseAvatar(e) {
const { avatarUrl } = e.detail 
this.setData({
  avatarUrl,
})
console.log("获取到用户输入的头像为"+ avatarUrl)
     // 登录
     var that = this;
     wx.login({
         success: function(res) {
             //console.log(res.code)
             // 发送 res.code 到后台换取 openId, sessionKey, unionId
             if (res.code){
                 wx.request({
                     url: config.apiUrl + '/api/getOpenid',
                     method: 'POST',
                     data:{
                         code:res.code,
                     },
                     success:function(response){
                         console.log("成功获取到用户openid 下面开始获取头像:",response.data.openid)
      &