前言

本文主要是完善sbvadmin的个人中心模块的其中的头像上传功能，借此也就实现了springboot配合vue实现文件上传。
以下是主要编写思路：

  1. 使用Files.copy 函数将前端上传的图片存储到某个文件夹
  2. 定制WebMvcConfigurer，将该文件夹提供远程访问的权限
  3. 数据库存储相对路径，接口补全host和port
  4. 使用dev和prod环境配置文件实现host和port的配置

一、文件存储 UploadController

@RestController
@RequestMapping("/api")
public class UploadController {

    @Value("${application.uploadsPath}")
    private String uploadsPath;

    @PostMapping("/upload")
    public String create(@RequestPart MultipartFile file) throws IOException {
        String fileName = file.getOriginalFilename();

        //获取当前jar 的执行路径
        ApplicationHome home = new ApplicationHome(getClass());
        File jarFile = null;
        String path = null;
        try{
            jarFile = home.getSource() != null ?  home.getSource() : home.getDir();
            String parent = jarFile.getParent();
            path = jarFile.getParentFile().toString();
        }catch(Exception e){
            e.printStackTrace();
        }
        // 创建uploads 文件夹
        String uploadsDirPath = path+ File.separator + uploadsPath;
        File uploadsDir = new File(uploadsDirPath);
        if (!uploadsDir.exists()){ //如果不存在
            boolean dr = uploadsDir.mkdirs(); //创建目录
        }
        String filePath = uploadsDirPath +  File.separator + fileName;
        File dest = new File(filePath);
        if (!dest.exists()){ //如果不存在
            Files.copy(file.getInputStream(), dest.toPath()); //创建文件
        }
        return uploadsPath + File.separator + fileName; // 只存相对地址
    }
}

二、配置文件 MyWebMvcConfig

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Value("${application.uploadsPath}")
    private String uploadsPath;

    // 配置上传的文件外部访问
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        ApplicationHome h = new ApplicationHome(getClass());
        File jarF = h.getSource();
        String dirPath = jarF.getParentFile().toString() + File.separator + uploadsPath + File.separator;

        registry.addResourceHandler(File.separator + uploadsPath + File.separator + "**")
                .addResourceLocations("file:///" + dirPath,
                        "file:///" + dirPath); //  file后面的“///” 是了解决后面路径不生效问题
    }
}

三、配置环境变量

application.properties

spring.profiles.active=@profileActive@

application-dev.properties

# server
server.host=http://localhost
server.port=8081

application-prod.properties

server.host=http://118.31.68.110
server.port=8081

总结

  1. 后端技术点大概就这么多
  2. 前端技术点不多说，这里我还是用vben的官方代码，有点小改动

参考文档：

fix: 裁剪上传接口与uploadModal统一：url