uniapp-小程序修改头像组件图片地址和接口地址修改下可以用了使用的接口是fastadmin的图片上传地址

本文链接：https://blog.csdn.net/qq_36458559/article/details/131813186

           }
       },
       onLoad(option) {
           const userinfo = uni.getStorageSync("userinfo")
           this.banner = userinfo.avatar ? userinfo.avatar : this.banner
           this.value = userinfo.nickName ? userinfo.nickName : ''
       },
       methods: {
           bindchooseavatar(e) {
               console.log(e);
               this.banner = e.detail.avatarUrl
               this.changeinfo(this.value, this.banner)
           },
           onNickName(e) {
               console.log(e.detail);
               console.log(4444);
               this.value = e.detail.value
               this.changeinfo(this.value, this.banner)
           },
           changesnumber() {

               this.changeinfo(this.value, this.banner)
           },
           async changeinfo(value, banner) { //修改用户信息
               const resUrl = await this.uploadact(value, banner);
               await this.reqEditAvatar(resUrl)
           },
           //修改头像
           uploadact(value, filePath) {
               return new Promise((resolve, reject) => {
                   uni.uploadFile({
                       url: imgUrl + '/api/Common/upload', //仅为示例，非真实的接口地址
                       filePath: filePath,
                       formData: {
                           'category': 'category2'
                       },
                       name: 'file',
                       success: function(res) {
                           console.log(
                               "图片上传返回地址res :>> ",
                               JSON.parse(res.data).data
                           );
                           resolve(imgUrl+JSON.parse(res.data).data.url);
                       },
                       fail: (err) => {
                           reject(err);
                           return uni.showToast({
                               icon: "loading",
                               title: "上传失败",
                           });
                       },
                   });
               })

           },
           async reqEditAvatar(resUrl) {
               let data = {
                   nickName: this.value,
                   avatarUrl: resUrl,
               }
               let url = '/userInfo/updateUser';
               await this.$api.apiget(url, data)
               this.$apimsg.msg('修改成功');
               uni.switchTab({
                   url: '/pages/my/my'
               })
           }
       },

}
</script>

   .container {
       padding-top: 115px;
       position: relative;
       width: 100vw;
       height: 100vh;
       overflow: hidden;
       background: #fff;
   }

   .wrapper {
       position: relative;
       z-index: 90;
       background: #fff;
       padding-bottom: 40upx;
   }

   .back-btn {
       position: absolute;
       left: 40upx;
       z-index: 9999;
       padding-top: var(--status-bar-height);
       top: 40upx;
       font-size: 40upx;
       color: $font-color-dark;
   }

   .left-top-sign {
       font-size: 120upx;
       color: $page-color-base;
       position: relative;
       text-align: center;

       .imgss {
           width: 176upx;
           height: 176upx;
       }

}

   .right-top-sign {
       position: absolute;
       top: 80upx;
       right: -30upx;
       z-index: 95;

       &:before,
       &:after {
           display: block;
           content: "";
           width: 400upx;
           height: 80upx;
           background: #b4f3e2;
       }

       &:before {
           transform: rotate(50deg);
           border-radius: 0 50px 0 0;
       }

       &:after {
           position: absolute;
           right: -198upx;
           top: 0;
           transform: rotate(-50deg);
           border-radius: 50px 0 0 0;
           /* background: pink; */
       }
   }

   .left-bottom-sign {
       position: absolute;
       left: -270upx;
       bottom: -320upx;
       border: 100upx solid #d0d1fd;
       border-radius: 50%;
       padding: 180upx;
   }

   .welcome {
       position: relative;
       font-size: 36upx;
       color: #555;
       text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
       text-align: center;
   }

   .input-content {
       padding: 0 60upx;
   }

   .input-item {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       padding: 0 30upx;
       background: $page-color-light;
       height: 120upx;
       border-radius: 4px;
       margin-bottom: 50upx;

       &:last-child {
           margin-bottom: 0;
       }

       .tit {
           height: 50upx;
           line-height: 56upx;
           font-size: $font-sm+2upx;
           color: $font-color-base;
       }

       input {
           height: 60upx;
           font-size: $font-base + 2upx;
           color: $font-color-dark;
           width: 100%;
       }
   }

   .confirm-btn {
       width: 630upx;
       height: 76upx;
       line-height: 76upx;
       border-radius: 50px;
       margin: auto;
       margin-top: 70upx;
       background: $uni-color-primary;
       background-color: #277EEB;
       color: #fff;
       font-size: $font-lg;

       &:after {
           border-radius: 100px;
       }

}

   .forget-section {
       font-size: $font-sm+2upx;
       color: $font-color-spec;
       text-align: center;
       margin-top: 40upx;
   }

   .register-section {
       position: absolute;
       left: 0;
       bottom: 50upx;
       width: 100%;
       font-size: $font-sm+2upx;
       color: $font-color-base;
       text-align: center;

       text {
           color: $font-color-spec;
           margin-left: 10upx;
       }
   }
</style>