2025年若依文件上传（若依文件上传接口）

科技前沿 • 2025-05-02 19:46 • 阅读 37

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

若依官方文档

1.1 通用上传分析

首先我这里有一个书籍列表的基础页面，我在它的修改这一栏加上了文件上传，这里前端其实就是用了若依封装的一个全局文件上传的组件，如果想看它的底层逻辑可以直接main.js，我这里就直接用了（但是后来发现全局组件不能行，还得自己封装elemntui的组件upload，这里只是先分析逻辑）

注意这里只是先分析，实现还在后面，因为若依自带的通用文件上传我们不能调用自己的上传接口，保存文件信息到数据库
在这里插入图片描述
讯享网
这里就是找到对应的修改的dialog对话框中的form加上全局组件就可以了

讯享网

然后我们在修改对话框中点击上传文件，就会发现它直接调用了后端通用的上传文件的接口，已经把文件上传到了服务器，并且返回了上传后的地址
在这里插入图片描述

在这里插入图片描述

上面就是上传后的文件，下面是通用上传接口返回的响应，自己可以先看清楚，对于这个新的文件名称fileName 其实就是去掉了前缀的配置地址然后加上了一个profile，这个是为了隐藏我们真实的配置的文件路径，把配置的地址映射为了profile

但是这里其实可能不是我们想要的，因为我们想调用我们自己的上传接口，这样我们后端还可以对文件进行处理，比如拿到文件后缀，把文件存入数据库对应的字段等。

1.2 修改实现上传接口

所以我们只能自己基于elemntui 去做修改,这里我想上传成功后还要返显文件名称

在列表的form加一个文件名称字段,

讯享网

首先对新增和修改的dialog做修改

data 数据

讯享网

javaScript方法

api/book.js

讯享网

后端其实就比较简单了，我也没做一个专门的文件表，只是在业务表里面加了一个file_name字段,表结构如下（这里只是做文件上传，所以不需要文件路径字段，后续做文件下载就必须要文件路径字段，后面我会再修改）

在这里插入图片描述

controller 这里是前端的upload组件传过来了一个二进制文件，然后后端把文件上传到服务器，并把文件名也返回给了前端，这样前端就可以对响应结果做解析，把文件名字段绑定到新增、修改的dialog里面，然后点击保存再把文件名称字段传回后端保存到数据库。

由于实现文件下载，所以必不可少的就是这个字段，所以我们还得加上这个字段,所以现在表结构如下，还得给所有的增删改查字段加上文件路径这个字段

在这里插入图片描述

其他的直接使用通用的文件下载接口就可以了，前端传一个文件路径回来，后端就可以直接下载了

前端需要传的文件路径是这样的

首先前端经过代理proxy之后就会拿到ip和端口，然后后端这时候有个拦截器，它会拦截,拦截之后把它再替换成配置文件中配置的绝对路径。

在这里插入图片描述

首先修改文件上传方法，加入一行,这样上传后，把文件路径绑定到了新增修改的dialong，在点击保存的时候，就可以把文件路径存入数据库。后续列表查询就可以读取到当前行的文件路径了。

讯享网

加上下载按钮

在method里面加上如下方法,这里就是直接调用了通用的文件下载，这里的filePanth就是前面保存的

讯享网

最后值得注意的是我目前实现的都是单文件上传和下载，多文件我后续会继续写demo

2025年若依文件上传（若依文件上传接口）

1.1 通用上传分析

1.2 修改实现上传接口

相关推荐