基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现（一）
更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
演示地址：RuoYi-Nbcio后台管理系统
原先这个基于RuoYi-Flowable-Plus的这个不支持本地图片上传，只支持oss图片上传，所以需要增加相应的本地上传图片功能。
1、先要理解原先若依的本地图片上传与显示的过程
图片上传
现在想要去上传一张照片，首先前端调用上传接口
/**
* xx图片上传
*/
@PostMapping("/avatar")
public AjaxResult avatar(@RequestParam("avatarfile") MultipartFile file) throws IOException
{
if (!file.isEmpty()){
// ...
String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);
if (userService.updateUserAvatar(loginUser.getUsername(), avatar))
{
AjaxResult ajax = AjaxResult.success();
ajax.put("imgUrl", avatar);
// ...
return ajax;
}
}
return AjaxResult.error("上传图片异常，请联系管理员");
}
保存到数据库，并返回给前端
{
code: 200
imgUrl: "/profile/avatar/2023/10/11/nbcio_20231011222512A001.png"
msg: "操作成功"
}
web前端将其拼接，就可以访问到服务器上的本地文件
http://localhost/dev-api//profile/avatar/2023/10/11/nbcio_20231011222512A001.png
图片路径
前端
可以看到图片路径有点陌生，这里使用到了代理；路径首先被web前端解析
-- 前端配置
process.env.VUE_APP_BASE_API = 'http://localhost/dev-api'
-- 使用代理来解决跨域问题
http://localhost/dev-api -> http://localhost:8080
-- 解析前端请求 /dev-api
http://localhost/dev-api/profile/avatar/2023/10/11/nbcio_20231011222512A001.png
-- 此时，再将请求交给后端处理
http://localhost:8080/profile/avatar/2023/10/11/nbcio_20231011222512A001.png
后端
后端对匹配的URL进行拦截 /profile/** ，映射至本地文件夹 RuoYiConfig.getProfile()。
/**
* 通用配置
*
* @author ruoyi
*/
@Configuration
public class ResourcesConfig implements WebMvcConfigurer
{
/** 配置静态资源映射 */
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
/** 本地文件上传路径 */
registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**").addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");
// ...
}
// ...
}
相关常量
# 资源映射路径 前缀
Constants.RESOURCE_PREFIX = "/profile"
# RuoYiConfig.getProfile() 获取项目信息 ruoyi.profile
/home/nbcio/upload
这样图片数据便被从本地拿到，经历了 前端 -> 后端 -> 本地文件 的过程！
2、根据上面的一些原理，现在思路修改一下，我的已经去掉/dev-api，同时也取消什么代理这些
接下来一步一步进行修改
3、application.yml增加下面内容，主要是两项与上传文件相关的内容
# 项目相关配置
ruoyi:# 名称name: RuoYi-Nbcio# 版本version: ${ruoyi-nbcio.version}# 版权年份copyrightYear: 2023# 实例演示开关demoEnabled: true# 本地：local\Minio：minio\阿里云：aliossuploadtype: local#文件上传根目录 设置profile: /home/nbcio/upload# 获取ip地址开关addressEnabled: true# 缓存懒加载cacheLazy: false4、application-dev.ym 先增加下面一项
nbcio: localfilehttp: http://localhost:9060 #上传图片的http基地址5、ResourcesConfig.java修改如下：
package com.ruoyi.framework.config;import com.ruoyi.common.config.RuoYiConfig;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.framework.interceptor.PlusWebInvokeTimeInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** 通用配置** @author Lion Li, nbacheng*/
@Configuration
public class ResourcesConfig implements WebMvcConfigurer {@Overridepublic void addInterceptors(InterceptorRegistry registry) {// 全局访问性能拦截registry.addInterceptor(new PlusWebInvokeTimeInterceptor());}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {/** 本地文件上传路径 */registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**").addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");}/*** 跨域配置*/@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);// 设置访问源地址config.addAllowedOriginPattern("*");// 设置访问源请求头config.addAllowedHeader("*");// 设置访问源请求方法config.addAllowedMethod("*");// 有效期 1800秒config.setMaxAge(1800L);// 添加映射路径，拦截一切请求UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);// 返回新的CorsFilterreturn new CorsFilter(source);}
}