空痕博客 - 编程技术分享

修复RuleApp在微信环境不能设置头像问题

KongHen02
昨天发布 /正在检测是否收录...

问题说明:

问题:RuleApp在微信内无法获取用户头像,且用户无法设置
产生原因:微信修改用户信息获取规则

修复方法:

  1. 新增微信环境设置头像按钮
<!-- #ifdef MP-WEIXIN -->
<button class="cu-btn bg-gradual-blue radius" open-type="chooseAvatar" @chooseavatar="avatarUpload"></button>
<!-- #endif -->

修改演示

  1. 修改avatarUpload函数,并新增uploadAvatarToSever函数
uploadAvatarToSever(path) {
    const uploadTask = uni.uploadFile({
        url: that.$API.upload(),
        filePath: path,
        //  header: {
        // "Content-Type": "multipart/form-data",
        // },
        name: 'file',
        formData: {
            'token': token
        },
        success: function(uploadFileRes) {
            setTimeout(function() {
                uni.hideLoading();
            }, 1000);
            var data = JSON.parse(uploadFileRes.data);
            //var data = uploadFileRes.data;
            if (data.code == 1) {
                // uni.showToast({
                //     title: data.msg,
                //     icon: 'none'
                // })
                that.avatar = data.data.url;
                that.avatarNew = data.data.url;
                localStorage.removeItem('toAvatar');
                that.userEdit();
                //console.log(that.avatar)
            } else {
                uni.showToast({
                    title: "头像上传失败,请检查接口",
                    icon: 'none'
                })
            }
        },
        fail: function() {
            setTimeout(function() {
                uni.hideLoading();
            }, 1000);
        }
    })
},
avatarUpload(data) {
    var that = this;
    var token = "";
    if (localStorage.getItem('userinfo')) {
        var userInfo = JSON.parse(localStorage.getItem('userinfo'));
        token = userInfo.token;
        token = userInfo.token;
    }
    // #ifdef APP-PLUS || H5
    base64ToPath(data)
        .then(path => {
            that.uploadAvatarToSever(path)
        })
        .catch(error => {
            console.error("失败" + error)
        })
    // #endif
    // #ifdef MP-WEIXIN
    const path = data.detail.avatarUrl
    that.uploadAvatarToSever(path)
    // #endif
},

修复结果:

修复后,在微信内编辑用户信息页面会有设置头像按钮,点击按钮会调用微信官方获取头像接口,选择微信头像或者设置其他头像接口,返回用户选择的头像临时路径,使用data.detail.avatarUrl获取临时路径,调用uploadAvatarToSever函数上传到服务器。

完整代码:

GitHub - RuleApp(KongHen)

原项目地址:

GitHub - RuleApp(buxia97)

© 版权声明
THE END
喜欢就支持一下吧
点赞 0 分享 收藏
评论 抢沙发
取消
易航博客