网站建设行吗,厦门的网站建设公司哪家好,建设银行网站收款怎么打明细,上海市建设工程合同备案网站更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统 原先这个基于RuoYi-Flowable-Plus的这个不支持本地图片上传#xff0c;只支持oss图片上传#xff0c;所以…
更多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\Miniominio\阿里云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);}
}
