springboot配合vue实现文件上传

前言

本文主要是完善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的官方代码，有点小改动

---

参考文档：
WebMvcConfigurer访问静态资源

菜鸟的springboot项目图片上传及图片路径分析

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

---

svbadmin学习日志

本学习日志是使用Springboot和Vue来搭建的后台管理系统：
演示地址：http://118.31.68.110:8081/index.html
账号：root
密码：123
所有代码可以在gitbub上找到，切换到相应分支即可。【代码传送门】

正篇

第一节 spring boot 模块化构建项目
第二节 整合mybatisplus完成用户增删改查
第三节 整合springsecurity实现基于RBAC的用户登录
第四节 springsecurity结合jwt实现前后端分离开发
第五节 使用ResponseBodyAdvice格式化接口输出
第六节 springboot结合redis实现缓存策略
第七节 springboot结合rabbitmq实现队列消息
第八节 springboot结合rabbitmq实现异步邮件发送
第九节 利用springboot的aop实现行为日志管理
第十节 利用Quartz实现数据库定时备份
第十一节 springboot配置log输出到本地文件
第十二节 使用flyway对数据库进行版本管理
第十三节 springboot配合VbenAdmin实现前端登录
第十四节 springboot配合VbenAdmin实现用户CURD
第十五节 基于RBAC的权限管理VbenAdmin前端实现
第十六节 springboot 打包vue代码实现前后端统一部署

番外

2.1 数据库设计原则
3.1 配置apifox自动获取登录的token
13.1 springboot 全局捕捉filter中的异常
14.1 springsecurity整合mybatisplus出现isEnable的问题和解决方案
springboot集成vue使用jenkins持续部署

---