wx.uploadFile 修改昵称和头像,不传头像会失败?

wx.uploadFile 修改昵称和头像,不传图会失败?


saveInfo() {
                var that = this;
                console.log(that.avatarUrl, that.name)
                wx.uploadFile({
                    url: "https://rongchuang.newreadingtech.com/api/v1/saveUserInfo",
                    filePath: that.avatarUrl,
                    header: {
                        "Authorization": 'bearer ' + uni.getStorageSync('token')
                    },
                    name: "headimgurl",
                    formData: {
                        "nickname": that.name
                    },
                    success: (res) => {
                        const data = JSON.parse(res.data);
                        console.log('data :>> ', data);
                        uni.showToast({
                            url: '保存成功',
                            mask: true,
                            complete() {
                                uni.redirectTo({
                                    url: '/pages/mine/mine'
                                })
                            }
                        })
                    },
                    fail: (res) => {
                        console.log("失败")
                    }
                });


引用 皆我百晓生 小程序回复内容作答:
根据你提供的代码,你使用了微信小程序的 wx.uploadFile 方法来上传用户的头像和修改昵称。在这段代码中,你指定了文件路径 that.avatarUrl 和请求参数 that.name,并将其作为上传的文件和表单数据发送到服务器。

根据微信小程序的官方文档,wx.uploadFile 方法的 filePath 参数表示要上传的文件的路径。而你在代码中将 that.avatarUrl 赋值给 filePath,这意味着你将用户选择的图像文件路径传递给了 wx.uploadFile 方法。

如果你不传递头像文件,即 that.avatarUrl 为 undefined 或者空字符串,wx.uploadFile 方法会返回失败。这是因为 wx.uploadFile 要求必须传递一个有效的文件路径来上传文件。

如果你要实现不传递头像的功能,并且在不上传头像的情况下也能成功保存昵称,你可以在代码中进行判断和处理。例如,可以在 wx.uploadFile 方法之前添加一个 if 条件判断,检查 that.avatarUrl 是否为空。如果为空,则只发送昵称修改请求;否则,同时发送昵称和头像的请求。

以下是一种可能的修改方案供参考:

saveInfo() {
    var that = this;
    console.log(that.avatarUrl, that.name)
    
    if (that.avatarUrl) {
        // 上传头像和修改昵称
        wx.uploadFile({
            url: "https://rongchuang.newreadingtech.com/api/v1/saveUserInfo",
            filePath: that.avatarUrl,
            header: {
                "Authorization": 'bearer ' + uni.getStorageSync('token')
            },
            name: "headimgurl",
            formData: {
                "nickname": that.name
            },
            success: (res) => {
                const data = JSON.parse(res.data);
                console.log('data :>> ', data);
                uni.showToast({
                    url: '保存成功',
                    mask: true,
                    complete() {
                        uni.redirectTo({
                            url: '/pages/mine/mine'
                        })
                    }
                })
            },
            fail: (res) => {
                console.log("失败")
            }
        });
    } else {
        // 只修改昵称
        wx.request({
            url: "https://rongchuang.newreadingtech.com/api/v1/saveUserInfo",
            method: "POST",
            header: {
                "Authorization": 'bearer ' + uni.getStorageSync('token')
            },
            data: {
                "nickname": that.name
            },
            success: (res) => {
                const data = res.data;
                console.log('data :>> ', data);
                uni.showToast({
                    url: '保存成功',
                    mask: true,
                    complete() {
                        uni.redirectTo({
                            url: '/pages/mine/mine'
                        })
                    }
                })
            },
            fail: (res) => {
                console.log("失败")
            }
        });
    }
}

注意,这只是一种修改方案,并没有进行完整的错误处理。你可以根据你的实际需求进一步修改和完善这段代码。

【以下回答由 GPT 生成】

问题标题: wx.uploadFile 修改昵称和头像,不传头像会失败?

问题内容:

我正在使用vue.js开发一个小程序,我使用wx.uploadFile方法来修改用户的昵称和头像。但是我发现如果不传头像参数,上传会失败。我想知道为什么不传头像会导致上传失败?

以下是我的代码:

saveInfo() {
    var that = this;
    console.log(that.avatarUrl, that.name)
    wx.uploadFile({
        url: "https://rongchuang.newreadingtech.com/api/v1/saveUserInfo",
        filePath: that.avatarUrl,
        header: {
            "Authorization": 'bearer ' + uni.getStorageSync('token')
        },
        name: "headimgurl",
        formData: {
            "nickname": that.name
        },
        success: (res) => {
            const data = JSON.parse(res.data);
            console.log('data >>', data);
            uni.showToast({
                url: '保存成功',
                mask: true,
                complete() {
                    uni.redirectTo({
                        url: '/pages/mine/mine'
                    })
                }
            })
        },
        fail: (res) => {
            console.log("失败")
        }
    });
}

分析解决方案

根据提供的代码,上传头像文件是使用wx.uploadFile方法,通过指定filePathname来上传文件。如果不传头像参数,上传就会失败。

上传文件时,头像文件应该被指定为filePath参数的值,但是在不传头像参数的情况下,that.avatarUrl的值可能为空,导致上传失败。

为了解决这个问题,你需要在上传之前检查that.avatarUrl是否存在,如果不存在则取消上传并提示用户选择头像文件。

以下是优化后的代码:

saveInfo() {
    var that = this;
    console.log(that.avatarUrl, that.name)

    // 检查是否选择了头像文件
    if (!that.avatarUrl) {
        uni.showToast({
            title: '请选择头像文件',
            icon: 'none',
            duration: 2000
        });
        return;
    }

    wx.uploadFile({
        url: "https://rongchuang.newreadingtech.com/api/v1/saveUserInfo",
        filePath: that.avatarUrl,
        header: {
            "Authorization": 'bearer ' + uni.getStorageSync('token')
        },
        name: "headimgurl",
        formData: {
            "nickname": that.name
        },
        success: (res) => {
            const data = JSON.parse(res.data);
            console.log('data >>', data);
            uni.showToast({
                title: '保存成功',
                icon: 'success',
                mask: true,
                complete() {
                    uni.redirectTo({
                        url: '/pages/mine/mine'
                    })
                }
            })
        },
        fail: (res) => {
            console.log("失败")
        }
    });
}

这样,如果用户没有选择头像文件,将会弹出一个提示框要求用户选择头像文件,并且不会执行上传操作。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^