基于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: 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 {@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);}
}