1.引入oss依赖和文件上传依赖

oss依赖，在oss官方文档中有其他版本和教程

<!--阿里云oss的依赖-->
<dependency>
  <groupId>com.aliyun.oss</groupId>
  <artifactId>aliyun-sdk-oss</artifactId>
  <version>3.15.1</version>
</dependency>
<!--文件上传依赖-->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.3</version>
</dependency>

2.在spring配置文件中配置文件解析器

<!--文件上传解析器-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!--最大上传空间-->
    <property name="maxUploadSize" value="52428800"></property>
</bean>

3.创建阿里云账号并开通oss

阿里云-计算，为了无法计算的价值 (aliyun.com)

4.使用elementui完成上传的界面设置

5.后端代码

因为我们要上传到oss，所以要观看阿里云文档，并根据教程封装文件上传工具类；

将文档中的代码稍作修改并封装：

public static String upload(MultipartFile file){
    //Bucket中的外网访问节点。
    String endpoint = "oss-cn-beijing.aliyuncs.com";
    // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
    //阿里云账号AccessKey的id和密码
    String accessKeyId = "LTAI5tNvDF5EBJXyQvxthLp";
    String accessKeySecret = "873qAuj4wOt66nQpLrJd2PMGeWrwu";
    // 填写Bucket名称，例如examplebucket。
    String bucketName = "shi-yan";
    //上传到oss的文件名  uuid.randomuuid是一个随机的字符串，为了确保文件的唯一性
    String objectName = UUID.randomUUID()+file.getOriginalFilename();
    // 填写方的完整文件路径名，例如D:\localpath\examplefile.txt。file.getOriginalFilename()获取文件路径名
    String filePath= file.getOriginalFilename();

    // 创建OSSClient实例。
    OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

    try {
        /*将输入流改为我们自己的输入流*/
        InputStream inputStream = file.getInputStream();
        // 创建PutObjectRequest对象。
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, inputStream);
        // 设置该属性可以返回response。如果不设置，则返回的response为空。
        putObjectRequest.setProcess("true");
        // 创建PutObject请求。
        PutObjectResult result = ossClient.putObject(putObjectRequest);
        // 如果上传成功，则返回我们的路径。
        if (result.getResponse().getStatusCode()==200){
            return "https://"+bucketName+"."+endpoint+"/"+objectName;
        }
    } catch (
            OSSException oe) {
        System.out.println("Caught an OSSException, which means your request made it to OSS, "
                + "but was rejected with an error response for some reason.");
        System.out.println("Error Message:" + oe.getErrorMessage());
        System.out.println("Error Code:" + oe.getErrorCode());
        System.out.println("Request ID:" + oe.getRequestId());
        System.out.println("Host ID:" + oe.getHostId());
    } catch (Exception ce) {
        System.out.println("Caught an ClientException, which means the client encountered "
                + "a serious internal problem while trying to communicate with OSS, "
                + "such as not being able to access the network.");
        System.out.println("Error Message:" + ce.getMessage());
    } finally {
        if (ossClient != null) {
            ossClient.shutdown();
        }
    }
    return null;
}

controller:

使用我们刚刚创建的工具类，工具类接受一个MultipartFile 类型的变量，且变量名必须为file

/**
 * 文件上传专属类型
 * @param file 文件上传专属变量名
 * @return
 */
@RequestMapping("/upload")
@ResponseBody
public Request upload(MultipartFile file){
    /*返回的数据为路径*/
    final String path = uploadUtil.upload(file);
    if (path==null){
        return new Request(500,"上传文件失败",null);
    }
    return new Request(200,"上传文件",path);
}

6.前端回显照片

将后端返回的路径地址赋值给前端

7.将头像路径添加到数据库

因为步骤6，所以学生对象中已经有了头像图片的路径，我们现在只需要将它添加到数据库中，便可完成需求

在mybatis中直接加上列和数据即可