修复微信小程序获取头像的bug，微信小程序新版头像API使用

原创

已于 2023-12-01 11:01:23 修改 · 5.3k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #bug #小程序

于 2023-07-03 19:03:43 首次发布

文章详细描述了在微信小程序中遇到的头像上传问题，即真机调试时无法保存头像到服务器和数据库。作者提供了使用wx.saveFile（或wx.getFileSystemManager.saveFile）保存临时文件，然后通过wx.uploadFile上传到服务器的解决方案。在Node.js后台，利用multer处理文件上传，并保存到指定目录，更新数据库。最后，文章提到了在小程序中更新头像URL以解决头像未立即刷新显示的问题。

接着我之前发布的一篇文章：微信小程序上传头像的临时路径，持久化保存到服务器与数据库（nodejs后台开发）_盒子猫君的博客-优快云博客

今天我就来解决掉之前的问题吧！

从之前的后台报错来看，获取到的tempFilePath值和avatarUrl的值相同，都是http://tmp，不过头像都已经上传成功了并存到了数据库。而在真机调试时，用户选择头像后，是无法保存到数据库和对应的文件夹中的。

经过分析后，原因是在微信小程序中，选择头像后会返回一个临时文件路径（tempFilePath）供开发者进行上传和保存操作。真机调试时，是无法直接访问和保存这个临时文件的，所以在该代码中直接读取tempFilePath可能会出现问题。

解决方案下面就有了：

使用wx.saveFile保存临时文件，并将保存的文件路径作为参数传递给wx.uploadFile进行上传操作：

onChooseAvatar(e) {
    const { avatarUrl } = e.detail

    wx.saveFile({
        tempFilePath: avatarUrl,
        success(res) {
            const savedFilePath = res.savedFilePath
            console.log("保存的头像文件路径：" + savedFilePath)

            // 上传保存的图片
            wx.uploadFile({
                url: config.apiUrl + '/api/avatarUrl',
                filePath: savedFilePath,
                name: 'file',
                formData: {
                    'openid': wx.getStorageSync('openid')
                },
                success(res) {
                    console.log('uploadFile响应数据:', res.data);
                    try {
                        const data = JSON.parse(res.data)
                        console.log('upload success');
                        console.log("成功获取到用户头像存入数据库:", data.path);
                        wx.showToast({
                            title: '头像上传成功',
                            icon: 'success',