前言
本文主要是完善sbvadmin的个人中心模块的其中的头像上传功能,借此也就实现了springboot配合vue实现文件上传。
以下是主要编写思路:
- 使用Files.copy 函数将前端上传的图片存储到某个文件夹
- 定制WebMvcConfigurer,将该文件夹提供远程访问的权限
- 数据库存储相对路径,接口补全host和port
- 使用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
总结
- 后端技术点大概就这么多
- 前端技术点不多说,这里我还是用vben的官方代码,有点小改动
参考文档: