7|7 简阅项目修改头像功能 7简阅项目修改头像功能

写代码之前的准备工作：
1.在阿里云oss登录并实名认证
开通对象存储控制台oss，新建一个bucket（多个单词中划线分割），开通AccessKey（可以改地址），记录id号，后面会用到

文章图片
image

后端：
pom.xml

com.aliyun.oss aliyun-sdk-oss 2.8.3

第一个测试程序，测试阿里云OSS上传功能

public class AliOSSTest { public static void main(String[] args) { // Endpoint以杭州为例，其它Region请按实际情况填写。 String endpoint = "http://oss-cn-hangzhou.aliyuncs.com"; // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高 String accessKeyId = "****"; String accessKeySecret = "****"; String bucketName = "****"; String filedir = "avatar/"; String fileKey = "hello.jpg"; // 创建OSSClient实例 OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); // 上传文件 PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileKey, new File("D:\\bg.jpg")); //时间戳 Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10); // 生成URL URL url = ossClient.generatePresignedUrl(bucketName, filedir + fileKey, expiration); System.out.println(url); ossClient.shutdown(); } }

Mapper类

@Update("UPDATE t_user SET nickname=#{nickname} WHERE id =#{id}") void nickname(User user);

Service类

void nickname(User user);

编写实现类：

@Override public void nickname(User user) { userMapper.nickname(user); } }

测试类：

@Test public void nickname() { User user=userService.getUserById(1); user.setNickname("明天"); userService.updateUser(user); }

编写测试程序：UploadController

package com.soft1721.jianyue.api.controller; import com.aliyun.oss.OSSClient; import com.aliyun.oss.model.PutObjectResult; import com.soft1721.jianyue.api.util.ResponseResult; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.net.URL; import java.util.Date; import java.util.UUID; @RestController @RequestMapping(value = "https://www.it610.com/api") public class UploadController { @PostMapping("/avatar/upload") public String ossUpload(@RequestParam("file") MultipartFile sourceFile) { String endpoint = "http://oss-cn-hangzhou.aliyuncs.com"; String accessKeyId = "***"; String accessKeySecret = "***"; String bucketName = "***"; String filedir = "avatar/"; // 获取源文件名 String fileName = sourceFile.getOriginalFilename(); // 获取源文件名后缀 String suffix = fileName.substring(fileName.lastIndexOf(".")); //uuid生成主文件名 String prefix = UUID.randomUUID().toString(); //新文件名 String newFileName = prefix + suffix; //File类型的临时文件 File tempFile = null; try { //创建临时文件，用uuid主文件名+原后缀名 tempFile = File.createTempFile(prefix, prefix); // MultipartFile转成File sourceFile.transferTo(tempFile); } catch (IOException e) { e.printStackTrace(); } OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, filedir + newFileName, tempFile); Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10); // 生成URL URL url = ossClient.generatePresignedUrl(bucketName, filedir + newFileName, expiration); ossClient.shutdown(); //URL返回给客户端 return url.toString(); } }

userController修改用户头像接口：

@PostMapping("/avatar") public String ossUpload(@RequestParam("file") MultipartFile sourceFile,@RequestParam("userId") int userId) { String endpoint = "http://oss-cn-hangzhou.aliyuncs.com"; String accessKeyId = "***"; String accessKeySecret = "***"; String bucketName = "***"; String filedir = "avatar/"; // 获取文件名 String fileName = sourceFile.getOriginalFilename(); // 获取文件后缀 String suffix = fileName.substring(fileName.lastIndexOf(".")); //uuid生成主文件名 String prefix = UUID.randomUUID().toString(); String newFileName = prefix + suffix; File tempFile = null; try { //创建临时文件 tempFile = File.createTempFile(prefix, prefix); // MultipartFile to File sourceFile.transferTo(tempFile); } catch (IOException e) { e.printStackTrace(); } OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, filedir + newFileName, tempFile); Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10); // 生成URL URL url = ossClient.generatePresignedUrl(bucketName, filedir + newFileName, expiration); ossClient.shutdown(); //根据userId查询出原始用户数据 User user = userService.getUserById(userId); //更新头像属性 user.setAvatar(url.toString()); //修改用户信息并持久化 userService.updateUser(user); //将头像链接返回给客户端，以便实时预览 return url.toString(); }

在swagger里面测试如果是200就成功了
前端：
1.setting页面点击用户资料跳转到user_info页面，别忘了在pages.json注册新页面

个人资料

【7|7 简阅项目修改头像功能】2.user_info页面

昵称 {{ nickname }} 头像：修改密码 .list-item { display: flex; height: 80px; align-items: center; justify-content: space-between; } /* .nickname{ float: right; } */