ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

nbcio-boot项目的文件上传与回显处理方法

2026/8/8 17:11:36 拓冰建站 浏览量
nbcio-boot项目的文件上传与回显处理方法

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888

·       基于jeecgboot的nbcio-boot里面有涉及文件的上传与回显或下载,里面很多模块都有这方面的需求,所以这里统一对这部分做说明。

        因为支持本地与OSS的文件上传与处理,所以这里主要进行本地与其它类型的区分

       在yml进行设置,如下,主要是类型与上传地址

jeecg :# 是否启用安全模式safeMode: false# 签名密钥串(前后端要一致,正式发布请自行修改)signatureSecret: nbcioestar05f1c54d63749eda95f9fa6d49v442aestarnbcio# 本地:local\Minio:minio\阿里云:aliossuploadType: localpath :#文件上传根目录 设置upload: /opt/upFiles#webapp文件路径webapp: /opt/webapp

1、后端的处理

所以在java调用的时候需要上面信息,同时调用下面的方法

@Value(value = "${jeecg.path.upload}")private String uploadpath;/*** 本地:local minio:minio 阿里:alioss*/@Value(value="${jeecg.uploadType}")private String uploadType;
if(CommonConstant.UPLOAD_TYPE_LOCAL.equals(uploadType)){uploadPath = CommonUtils.uploadLocal(FileUtil.getMultipartFile(imageFile),"/bs",uploadpath);}else{uploadPath = CommonUtils.upload(FileUtil.getMultipartFile(imageFile), "/bs", uploadType);}

这样可以返回上传的地址,以便保存到数据库里。

2、前端的处理

前端图片显示的时候需要进行转换,如:src="getImgView(file_url)",

:href="downloadFile(file_url)"

/* 图片预览 */getImgView(text){if(text && text.indexOf(",")>0){text = text.substring(0,text.indexOf(","))}return getFileAccessHttpUrl(text)},downloadFile(text){if(!text){this.$message.warning("未知的文件")return;}if(text.indexOf(",")>0){text = text.substring(0,text.indexOf(","))}let url = getFileAccessHttpUrl(text)return url;},

或者用下面的下载方式

downloadFile(text){if(!text){this.$message.warning("未知的文件")return;}if(text.indexOf(",")>0){text = text.substring(0,text.indexOf(","))}let url = getFileAccessHttpUrl(text)window.open(url);},