小程序之wx.chooseImage(Object object)

本文章参考小程序的开发文档
在我的个人信息页面，想要更换个人头像，使用wx.chooseImage(Object object)
主要参数如下：

在我实际操作时，需要自己设的参数很少，就设置了选择图片最多的张数为1。具体代码如下：
wxml部分:

	<view class="avatar">
		<image class="bgimg" src='https://hbimg.huabanimg.com/9cf2d584caf323cbacd85210e385ee18bc60065724646-0kPnvG_fw658/format/webp'></image>
	    <image class="img_avatar" src="{
    
    {userInfo.avatarUrl}}" mode="cover" bindtap="changeAvatar"></image>
	    <text class="userNickName">{
    
    {
    
    userInfo.nickName}}</text>
   </view>

在前端页面部分，要头像在image标签中，头像src为userInfo对象中的avatarUrl，通过userInfo.avatarUrl可以取到头像图片。
给image标签绑定changeAvatar事件，触发事件时，选择头像。
wxjs部分：
数据：

  data: {
    
    
    UserInfo:{
    
     },
  },

changeAvatar事件：

changeAvatar: function (e){
    
    
    let that = this
    wx.chooseImage({
    
    
      count: 1,
      success (res) {
    
    
        // tempFilePath可以作为img标签的src属性显示图片
        // console.log(res.tempFilePaths)  打印选择的图片路径
        var avatarUrl = 'userInfo.avatarUrl';
        that.setData({
    
    
          [avatarUrl]:res.tempFilePaths
          })
      }
    })
  },

值得注意的是，在wx.chooseImage(Object object)选择图片成功时，要修改头像src，即userInfo对象中的avatarUrl的值。本菜鸡在这又翻车了，

根据某人的讲解是因为“set.data里边对象深度超过1了，可以在外面用=的方式赋值”，然后我就又去看了setData ,使用了两种改法，都成功了。
（1）直接在data里改数组对象为JSON对象，降低深度。
页面部分：

js部分：

（2）根据网友一丝墨的文章，将要改变的属性转换成字符串，再用中括号包起来修改就行了。如下：
wxml部分：

<!-- 头像及昵称 -->
	<view class="avatar">
		<image class="bgimg" src='https://hbimg.huabanimg.com/9cf2d584caf323cbacd85210e385ee18bc60065724646-0kPnvG_fw658/format/webp'></image>
		<image class="img_avatar" src="{
    
    {userInfo.avatarUrl}}" mode="cover" bindtap="changeAvatar"></image>
		<text class="userNickName">{
    
    {
    
    userInfo.nickName}}</text>
	</view>

wxjs部分:

  data: {
    
    
    UserInfo:{
    
     },
    }

  changeAvatar: function (e){
    
    
    let that = this
    wx.chooseImage({
    
    
      count: 1,
      success (res) {
    
    
        // tempFilePath可以作为img标签的src属性显示图片
        // console.log(res.tempFilePaths)  打印选择的图片路径
        var avatarUrl = 'userInfo.avatarUrl';
        that.setData({
    
    
          [avatarUrl]:res.tempFilePaths
          })
      }
    })
  },

至于为啥要在changeAvatar里写let that = this，是因为this指向不同。
在chooseImage中的this指向的是chooseImage函数中的this,而要在chooseImage函数中改变页面的data数据，需要在chooseImage函数外增加that指针(that指针指向页面中this指向的位置),在chooseImage函数操作that即可以操作页面的数据，这样把函数的this和页面的this区分开使用。
效果如下：
实现完成！