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 = "/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注册新页面

    个人资料

2.user_info页面

    
        
            
                昵称
                
                    
                        {{ nickname }}
                    
                

                
                
            
            
                头像：
                
            
            修改密码