2023年8月22日【微信小程序获取头像临时路径转base64编码传给后台储存】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

参考链接

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

微信小程序获取用户头像昵称手机号最新版

小程序图片转base64方案（多种解决方案）

---

头像昵称填写 | 微信开放文档

提示：以下是本篇文章正文内容，下面案例可供参考

一、获取头像代码

wxml代码

<!-- 获取头像和名字 -->
<view style="margin: 20rpx 0;display: flex;flex-direction: column;align-items: center;">
  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
     <image class="avatar" src="{{avatarUrl}}" style="width: 100rpx;height: 100rpx;" mode="aspectFit"></image>
  </button>
  <input type="nickname" class="weui-input" placeholder="请输入昵称" />
</view>

js

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  // 获取路径
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

二、使用步骤

1.点击头像

点击微信头像，打印的链接是一个临时链接，复制到外面的浏览器打开失效。
不管是点击微信头像，还是上传图片、或者是拍照，得到的都是一个路径。

http://tmp/DXGZXiE0qJ0Teb5748474b9a6cf28e2dd60c91f22c42.jpeg
外部浏览器会打不开，微信开发者工具能打开预览

2.把图片转化为base64格式传给后台

代码如下（示例）：

// 图片转64代码
base64(url, type) {
  return new Promise((resolve, reject) => {
    wx.getFileSystemManager().readFile({
      filePath: url, //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success: res => {
        // resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
        resolve(res.data)
      },
      fail: res => reject(res.errMsg)
    })
  })
},

success里面的resolve返回值，有的要加data:image/png,有的不要,
看你后台获取有没有问题，我这里后台获取是不需要base64的前缀。我保留了注释

之前已经写过了获取头像路径的方法，配合base64转化方法一起使用

// 获取头像
  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    this.setData({
      avatarUrl,
    })
    console.log(avatarUrl, "avatarUrl");
    // 执行图片转base64方法
    this.base64(avatarUrl, "png").then(res => {
      console.log(res, 'base64路径') //res是base64路径
      this.setData({
        'form.base64': res
      })
    })
    console.log(avatarUrl, '1');
  },
  // 图片转64
  base64(url, type) {
    return new Promise((resolve, reject) => {
      wx.getFileSystemManager().readFile({
        filePath: url, //选择图片返回的相对路径
        encoding: 'base64', //编码格式
        success: res => {
          // resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
          resolve(res.data)
        },
        fail: res => reject(res.errMsg)
      })
    })
  },

form.base64就是

---

总结

全部代码
wxml

<!--pages/mine/user-edit/user-edit.wxml-->
<!-- 用户授权头像昵称页面 -->
<view class="userInfo-container">
  <view style="background-color: #F7F7F7;height: 20rpx;"></view>
  <van-cell-group>
    <van-cell title-width="400rpx">
      <view slot="title" class="cell-title">
        头像<text style="color: #999;font-size: 22rpx;">（点击上传头像或更换头像）</text>
      </view>
      <view class="cell-value">
        <button class="cell-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image src="{{avatarUrl}}" mode="aspectFill"></image>
        </button>
      </view>
    </van-cell>

    <van-cell title-width="400rpx">
      <view slot="title">
        昵称<text style="color: #999;font-size: 22rpx;">（点击使用微信昵称或填写昵称）</text>
      </view>
      <input type="nickname" value="{{form.nickName}}" class="weui-input" bindinput="onChangeInput" placeholder="请输入昵称" />
    </van-cell>
    <van-cell title="手机号">
      <input wx:if="{{form.phone}}" type="nickname" value="{{form.phone}}" class="weui-input" bindinput="onChangeInput" disabled />
      <button wx:else="" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" size="mini">一键获取</button>
    </van-cell>
  </van-cell-group>
  
  <view style="color: #C8C9CC; font-size: 24rpx;padding: 10rpx 30rpx;">
    为杜绝垃圾信息，手机号绑定后不可更改。敬请谅解！
  </view>
  <!-- <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号码</button> -->
  <view class="form-btn">
    <van-button type="primary" round block color="#F24129" bindtap="onSave">确定</van-button>
  </view>


  <!-- <input type="nickname" class="weui-input" placeholder="请输入昵称" /> -->
  <image src="{{img}}" mode="aspectFill"></image>

</view>

样式

/* pages/mine/user-edit/user-edit.wxss */

.userInfo-container{
  /* margin: 20rpx 0; */
  background-color: #f7f7f7;
  height: 100vh;
}

.cell-title{
  line-height: 100rpx;
}
.cell-value{
  display: flex;
  justify-content: flex-end;
}

.cell-btn {
  padding: 0;
   width: 100rpx;
  height: 100rpx;
  margin: 0;
}
.cell-btn image{
  width: 100rpx;
  height: 100rpx;
}

/* 提交按钮 */
.form-btn{
  margin: 20rpx;

}

js代码

// pages/mine/user-edit/user-edit.js

var app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 头像
    avatarUrl: defaultAvatarUrl, // 头像链接
    form: {
      nickName: "", // 用户昵称
      base64: "", // 图片
      phone: "", // 手机号
    },
    img: "",
  },

  // 获取头像
  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    this.setData({
      avatarUrl,
    })
    console.log(avatarUrl, "avatarUrl");
    // 执行图片转base64方法
    this.base64(avatarUrl, "png").then(res => {
      console.log(res, 'base64路径') //res是base64路径
      this.setData({
        'form.base64': res
      })
    })
    console.log(avatarUrl, '1');
  },
  // 图片转64
  base64(url, type) {
    return new Promise((resolve, reject) => {
      wx.getFileSystemManager().readFile({
        filePath: url, //选择图片返回的相对路径
        encoding: 'base64', //编码格式
        success: res => {
          // resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
          resolve(res.data)
        },
        fail: res => reject(res.errMsg)
      })
    })
  },
  // 输入昵称
  onChangeInput(e) {
    // console.log(e.detail.value, '昵称');
    this.setData({
      "form.nickName": e.detail.value
    })
  },
  // 点击确定
  onSave() {
    console.log(this.data.form);
    // 说明手机号不存在,必须先授权手机号
    if (!this.data.form.phone) {
      wx.showToast({
        title: '请先授权手机号',
        icon: 'none',
        duration: 1500
      })
      return
    }
    let data = {
      yh_img: this.data.form.base64,
      yh_name: this.data.form.nickName,
      user_id: wx.getStorageSync('openid')
    }
    app.http.request("/purchase/usereid", data, "POST").then(res => {
      console.log(res, '提交头像和名字');
      if (res.code == 100) {
        // this.setData({
        //   img: res.data.yh_img
        // })
        wx.showToast({
          title: '修改成功',
          icon: 'success',
          duration: 1500
        })
        setTimeout(() => {
          let pages = getCurrentPages(); //页面栈
          let beforePage = pages[pages.length - 2];
          var obj = JSON.parse(JSON.stringify(beforePage)).options
          let query = ""
          let aUrl = []
          let fnAdd = function (key, value) {
            return key + '=' + value
          }
          for (var k in obj) {
            aUrl.push(fnAdd(k, obj[k]))
          }
          query = aUrl.join('&')
          wx.switchTab({
            url: '/' + beforePage.route + "?" + query
          })
          wx.reLaunch({
            url: '/' + beforePage.route + "?" + query
          })
        }, 1500)
      }
    })

  },

  // 允许授权手机号
  getPhoneNumber(e) {
    console.log(e, '执行方法');
    console.log(e.detail.errMsg, '返回信息'); //
    console.log(e.detail.iv, '加密算法的初始向量'); //加密算法的初始向量
    console.log(e.detail.encryptedData, '包括敏感数据在内的完整用户信息的加密数据'); //包括敏感数据在内的完整用户信息的加密数据
    if (e.detail.encryptedData && e.detail.iv) {
      wx.checkSession({ //监测登录是否过期
        success: () => {
          let data = {
            encryptedData: e.detail.encryptedData,
            iv: e.detail.iv,
            session_key: wx.getStorageSync('sessionKey'),
            user_id: wx.getStorageSync('openid'),
          }
          app.http.request("/Phone/phoneadd", data, "POST").then(res => {
            console.log(res, '添加手机号到后台');
            this.getUserPhone()
          })
        },
        fail: () => { // session_key 已经失效，需要重新执行登录流程

        }
      })
    }
  },
  // 获取自己电话
  getUserPhone() {
    app.http.request("/Phone/phonelist", {
      user_id: wx.getStorageSync('openid'),
    }, "POST").then(res => {
      console.log(res.data, '自己的电话');
      wx.setStorageSync('userphone', res.data)
      this.setData({
        "form.phone": res.data
      })
    })

  },
  // 获取用户原有信息
  getUserInfo() {
    app.http.request("/Userlist/userlist", {
      user_id: wx.getStorageSync('openid'),
    }, "POST").then(res => {
      console.log(res, '用户信息');
      if (res.code == 100) {
        this.setData({
          avatarUrl: res.data.yh_img,
          'form.nickName': res.data.yh_name,
          'form.phone': res.data.yh_phone
        })
        if(this.data.form.nickName=="微信用户"){
          this.setData({
            'form.nickName': "",
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 如果没有用户id
    if (!wx.getStorageSync('openid')) {
      wx.navigateTo({
        url: '/pages/login/index'
      })
    } else {
      this.getUserInfo()
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})