基于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\阿里云：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);
    }
}