uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户信息修改实现

锋哥原创的uniapp微信小程序投票系统实战:

uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV1ea4y137xf/后端修改用户昵称:

java 复制代码
/**
 * 更新用户昵称
 * @param wxUserInfo
 * @param token
 * @return
 */
@RequestMapping("/updateNickName")
public R updateNickName(@RequestBody WxUserInfo wxUserInfo,@RequestHeader String token){
    if(StringUtil.isNotEmpty(wxUserInfo.getNickName())) {
        Claims claims = JwtUtils.validateJWT(token).getClaims();
        wxUserInfoService.update(new UpdateWrapper<WxUserInfo>().eq("openid", claims.getId()).set("nick_name", wxUserInfo.getNickName()));
    }
    return R.ok();
}

前端修改用户昵称:

XML 复制代码
<input type="nickname"  placeholder="请输入昵称" v-model="userInfo.nickName" @blur="onChangeNickName"/>
javascript 复制代码
onChangeNickName:async function(e){
				console.log(e.detail.value);
				let nickName=e.detail.value;
				if(!isEmpty(nickName)){
					const result=await requestUtil({url:"/user/updateNickName",data:{nickName:nickName},method:"post"});
				}
			}
javascript 复制代码
export const isEmpty=(str)=>{
	if(str === '' || str.trim().length === 0 ){
		return true
	}else{
		return false;
	}
}

头像上传 后端:

定义上传路径:

javascript 复制代码
userImagesFilePath: D://uniapp/userImgs/
java 复制代码
@Value("${userImagesFilePath}")
private String userImagesFilePath;
java 复制代码
/**
 * 上传用户头像图片
 * @param userImage
 * @return
 * @throws Exception
 */
@RequestMapping("/uploadUserImage")
public Map<String,Object> uploadUserImage(MultipartFile userImage, @RequestHeader String token)throws Exception{
    System.out.println("filename:"+userImage.getName());
    Map<String,Object> resultMap=new HashMap<>();
    if(!userImage.isEmpty()){
        // 获取文件名
        String originalFilename = userImage.getOriginalFilename();
        String suffixName=originalFilename.substring(originalFilename.lastIndexOf("."));
        String newFileName= DateUtil.getCurrentDateStr()+suffixName;
        FileUtils.copyInputStreamToFile(userImage.getInputStream(),new File(userImagesFilePath+newFileName));
        resultMap.put("code",0);
        resultMap.put("msg","上传成功");
        resultMap.put("userImageFileName",newFileName);
        // 更新到数据库
        UpdateWrapper<WxUserInfo> updateWrapper=new UpdateWrapper<>();
        Claims claims = JwtUtils.validateJWT(token).getClaims();
        updateWrapper
                .eq("openid",claims.getId())
                .set("avatar_url",newFileName);
        wxUserInfoService.update(new UpdateWrapper<WxUserInfo>().eq("openid",claims.getId()).set("avatar_url",newFileName));
    }

    return resultMap;
}

前端头像实现:

button上加下 open-type="chooseAvatar"

javascript 复制代码
		onChooseAvatar:function(e){
			console.log(e.detail.avatarUrl)
			uni.uploadFile({
				header:{token:uni.getStorageSync("token")},
				url:getBaseUrl()+"/user/uploadUserImage",
				filePath:e.detail.avatarUrl,
				name:"userImage",
				success: (res) => {
					let result=JSON.parse(res.data);
					if(result.code==0){
						this.userInfo.avatarUrl=result.userImageFileName;
					}
				}
			})
		},
相关推荐
阿伟来咯~3 小时前
一些 uniapp相关bug
uni-app·bug
丁总学Java6 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
瑶琴AI前端7 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
说私域7 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8687 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165028 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦15 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac18 小时前
微信小程序的组件
微信小程序
stormjun19 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck20 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节