【项目难点】实现微信小程序中点击头像更换头像

由于展示个人信息的时候需要放上个人头像，所以为了更好的用户体验要有修改个人头像的功能。
最开始，打算使用uview的upload组件，结果发现总是有右上角的关闭和下方的进度条，非常丑。想到正常的个人信息下修改的时候都是直接点头像就能弹出修改头像的操作，决定使用img加事件的方式呼出文件选择器。
主要涉及到两个wx提供的api
分别是：wx.chooseImage(Object object)和wx.uploadFile(Object object)

<u-image id="img" shape="circle" :src="img" width="200rpx" height="200rpx" @click="image_click"></u-image>

img是在data中的一个值，用于绑定图片的src

image_click(){
                var that = this;
                wx.chooseImage({  //从本地相册选择图片或使用相机拍照
                  count: 1, // 默认9
                  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                  success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var tempFilePaths = res.tempFilePaths
                    wx.uploadFile({
                      url: `http://127.0.0.1:9999/uploadimg?sid=${that.sid}`,
                      filePath: tempFilePaths[0],
                      name: 'imgfile',
                      success: function (res) {
                        console.log(res)
                        that.img = tempFilePaths[0]//上传成功后立刻更换前端展示的头像
                      }
                    })
                  }
                })
            }

封装组件等以后再说