微信小程序临时头像下载和上传
@
saltyfish
Last Modified: 2025/01/13
小程序授权头像
为了获取头像，WXML 文件中需要一个 open-type 为 chooseAvatar 的 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 换成你们真实的后台接口地址！