更多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\阿里云：alioss uploadtype: local #文件上传根目录 设置 profile: /home/nbcio/upload # 获取ip地址开关 addressEnabled: true # 缓存懒加载 cacheLazy: false
4、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 { @Override public void addInterceptors(InterceptorRegistry registry) { // 全局访问性能拦截 registry.addInterceptor(new PlusWebInvokeTimeInterceptor()); } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { /** 本地文件上传路径 */ registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**") .addResourceLocations("file:" + RuoYiConfig.getProfile() + "/"); } /** * 跨域配置 */ @Bean public 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); // 返回新的CorsFilter return new CorsFilter(source); } }
