微信小程序临时头像下载和上传

小程序授权头像

为了获取头像，WXML 文件中需要一个 open-type 为 chooseAvatar 的 button。

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

当用户点击该按钮的时候，微信会在页面底部弹出如下操作界面，用户可以选择自己的微信图像或者从相册中选择一张图片作为头像。

js 部分代码参考如下：

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    console.log('avatar url is:' avatarUrl)
    this.setData({
      avatarUrl,
    })
  }
})

观察 console.log 在控制台打印的输出你会发现，图片地址是临时的，类似这样：
http://tmp/6Gyw2tap6Znu64e4844904fcf2a34580846e21885a96.jpg

这个地址是临时地址，不能在浏览器中打开，因此这个地址存储到后台也是没有意义的。

不过坑爹的是到了体验版和正式版之后，这个地址变成了一个本地地址，类似这样的：
wxfile://tmp_4c613d6b58d2a1520313e07fa549308f43547dfc4585f2f1.jpg

我们需要处理以上两种情况的临时地址，具体来说就是下载这个临时地址对应图片，并将图片存储到自己的图片服务器中。wxfile:// 开头的地址使用 wx.downloadFile 就不灵了，其实这种地址不需要任何额外处理，直接使用 wx.uploadFile 就可以。

更多内容请参考官方文档：开放能力 /用户信息 /获取头像昵称。

小程序下载临时图片

上文说到用户授权返回的图片地址是临时地址，为了持久化图片，我们需要自行下载图片并保存到我们自己的图片服务器中，做法如下：

function downloadTmpFile(tmpUrl) {
  return new Promise(function (rs, rj) {
    if (tmpUrl && tmpUrl.startsWith('wxfile://')) {
      rs(tmpUrl)
      return
    }
    wx.downloadFile({
      url: tmpUrl,
      success: function (res) {
        if (res.tempFilePath) {
          rs(res.tempFilePath)
        } else {
          rj(new Error('download file error'))
        }
      },
      fail: function (err) {
        rj(err)
      }
    })
  })
}

这里的核心就是调用 wx.downloadFile, 有了上面的辅助函数之后，下载临时图片也就是一句话的事情：

// 这里的 avatarUrl 就是 e.detail.avatarUrl
downloadTmpFile(avatarUrl).then(tmpFilePath => {
  // 这里便拿到了图片的文件路径，然后我们将这个文件上传到自己的图片服务器
})

到这里了，你肯定想问，怎么上传图片？请继续往下看。

小程序上传图片

同下载一样，可以借助微信提供的 wx.uploadFile 方法，我们也封装一个方法来上传图片：

function uploadTmpFile(tmpFilePath) {
  return new Promise(function (rs, rj) {
    wx.uploadFile({
      url: '/your-backend-upload-api-endpoint'
      filePath: tmpFilePath,
      name: 'file',
      success: function (res) {
        // 这里返回上传后的图片地址
        rs(res.data)
      },
      fail: function (err) {
        rj(err)
      }
    })
  })
}

PLEASE NOTE：COPY 的时候注意了，需要将上面的图片上传接口地址 /your-backend-upload-api-endpoint 换成你们真实的后台接口地址！