若依前后端分离版实现文件管理

1.前言

此代码是以若依前后端分离版为基础，实现文件夹和文件管理。文件夹支持新增、修改和删除等功能，文件支持上传、下载、修改、删除、回收站、恢复等功能。其中文件下载、上传、删除、恢复、预览等功能支持批量操作，并且上传可以选择模式，包括直接上传模式和分段上传模式。分段上传模式可定义最小分段大小和每段大小，如果文件小于最小分段大小时，采用直接上传的方式；如果文件大于最小分段大小时，按照每段大小进行上传，并且支持断点续传功能。文件预览功能是集成了我主页的可嵌入式文件预览系统，具体可以查看我的文章《以kkFileView为基础，可嵌入项目的前后端分离版（springboot+vue）文件预览系统结合若依框架前后端分离版的使用》。由于，可嵌入式文件预览系统代码，需要收费获取资源，此代码也需要收费获取，具体收费方式请看文章最后“总结和代码获取方式”。这两篇文章打赏一篇即可获取两篇文章的代码，如果已经打赏了我的可嵌入式文件预览系统文章而进入群，可以直接去群里下载相关代码。

2.使用步骤

1.由于集成若依框架，我的很多篇文章都写了若依框架如何快速启动，以后就不具体介绍了。也就是，配置本地maven仓库。新增本地数据库，这里需要执行项目sql文件夹下py.sql文件。修改数据库名称、用户名和密码。如果redis设置了密码，修改redis密码。

2.由于集成了可嵌入式文件预览系统，最好详细看下我的文章《以kkFileView为基础，可嵌入项目的前后端分离版（springboot+vue）文件预览系统结合若依框架前后端分离版的使用》。只需要查看3.使用步骤中，序号6将那三个jar包导入本地maven仓库。同时，查看3.使用步骤中，序号15、16和17启动Apache_OpenOffice_4.1.14_Win_x86_install_zh-CN.exe文件，安装OpenOffice。

注意：

我使用过程中出现了个问题，将项目上传到git后，再拉取到本地，并且将maven仓库指向了本地仓库，明明有那三个jar包，就是报错。将IDEA中maven配置取消，也就是将后面的Override前面的勾选去掉，指向默认仓库，进行保存。再指向实际仓库，然后再保存，报错问题解决。

3.功能介绍

1.整体页面

页面分为左侧和右侧两个区域，可以通过拖动修改两侧页面大小。左侧为文件夹区域，右侧为文件区域。文件区域右上角为操作区域、右下角为上传进度，左下角为当前文件夹指向，如果切换到回收站，功能会相应改变。所有图形按钮，鼠标悬停时，会显示其对应的功能。

2.文件夹操作

1.搜索

输入名称后，搜索文件夹树下包含此名称的节点，显示此节点和其组级节点。

2.新增

新增按钮就是“+”，如果文件夹树有当前活跃节点，会默认在此节点下新增文件夹。一般先选择节点，再点“新增”按钮，更好用。如果不想在此节点下新增文件夹，也可以手动修改。

3.修改

修改功能和新增类似，就是获取文件信息后，填写到表单中。但是，为了防止文件夹修改上级文件夹时形成环形结构，导致文件夹丢失，上级文件夹树不显示当前节点和其子节点。特别注意，根节点修改时，只能修改名称和备注。

4.删除

文件夹删除时，需要遵循三个规则。规则一，会检测文件夹中是否有文件，有文件的文件夹删除时，提示错误信息，只有没有文件的文件夹才能删除。规则二，有文件夹树形结构只有叶子节点才显示删除按钮，也就是只有叶子节点才能删除。规则三，根节点任何情况下不允许删除。

5.选择

选择文件夹有两种方式，一种是点文件区域左下角路径，另一种是直接点击文件树。为了防止操作文件夹时跳转文件夹，文件树点击“修改”或“删除”按钮时，文件夹不跳转，点击文件树其他区域时才跳转。

6.刷新

重新获取文件树内容，多人操作时，如果更新不及时，可以手动刷新下文件树。同时，节点会跳转到根节点。

3.文件操作

1.查询

支持文件名模糊查询和文件类型查询方式，文件类型是通过当前文件夹下所有文件类型去重得到。

2.重置

重置文件名称输入框和文件类型选择框，并查询当前文件夹下所有文件。

3.上传

上传功能非常复杂，和后端共用一套文件大小上传限制和文件类型限制，统一在后端配置，前端可以同步使用。不符合上述规则，不允许上传并且在上传进度中显示具体错误原因。上传模式默认是分段上传，可以设置文件大小为多少时才分段，每个段的大小，同时监控上传进度，并显示在上传进度列表中。由于上传功能较复杂，后面会具体配置后面说明。

4.下载

选择文件前面的选择框后，点击右上角“下载”按钮，支持多文件下载。如果不选择直接点击这个按钮，显示警告信息。选择文件后的“下载”按钮，下载当前文件。

5.删除

和下载功能类似，支持多文件删除和单文件删除。删除会提示删除确认信息，删除后文件会进入回收站。

6.修改

可以修改文件所属文件夹、文件名称和备注。

7.预览

点击文件某一行非选择框和非操作栏，都可以跳转到文件预览页面，回收站文件也支持此功能。文件预览功能后面会详细介绍。

8.刷新

多人操作时，重新获取当前文件夹下的文件。

3.回收站

1.说明

回收站只监控文件的删除，不监控文件夹的删除。查询和重置功能和文件操作一样，这里就不演示了。进入回收站后，左侧文件夹区域是没有作用，选择文件夹树的任意节点，重新回到文件页面。

2.恢复

恢复文件有两种情况，情况一，文件原有文件夹还存在直接进行恢复。

情况二，文件原有文件夹已经被删除，文件会进入恢复文件列表，选择需要恢复到的文件夹后，再进行恢复。恢复文件列表文件也是支持单文件恢复和多文件恢复。

3.删除

和文件操作中的删除使用方式一样，但是删除回收站的文件后，数据库文件数据和保存的文件都会被彻底删除，无法恢复，删除确认信息会进行提醒。

4.刷新

多人操作时，重新获取回收站文件。

5.预览

回收站中的文件和恢复文件列表中的文件都支持文件预览功能，使用方式和文件操作中的预览一样。

4.使用说明

1.后端配置

1.application.yml文件配置

1.application.yml文件是指ruoyi-admin/src/main/resources/application.yml文件。为了区分不同的项目，redis会自动拼接项目名称，可以根据实际情况修改项目名称（name）。

2.若依自带的文件路径，除了保存上传文件外，还保存文件预览系统缓存文件和分段上传的块信息，可以修改profile的值来切换文件保存位置。

3.文件大小限制统一在这配置，前端也会获取这里的配置值。根据实际情况修改单文件大小限制和总文件大小限制，我为了能够触发文件大小限制才这样不合理的设置文件大小。

注意：

1.若依3.8.9版本，在com.ruoyi.common.utils.file.FileUploadUtils类中，文件上传时再检测一次文件大小。而且这个是静态值，无法直接从application.yml中读取，每次修改上传文件大小限制时，都得修改两处位置，非常不方便。前端在文件上传之前，我会检测文件大小，感觉没必要再在这检测，我去掉了相关代码，如果有需要，可以去掉注释。

2.小伙伴可能有疑问，文件上传过程中，如果超过设置的大小限制，会有异常抛出，直接处理异常，也不用前端进行判断多方便。我也尝试了这种方式，我通过若依自带的全局异常处理器，处理了上传文件超出限制异常（MaxUploadSizeExceededException）。处理了后，后端控制台不显示异常信息了，异常处理方法也执行了，但是前端无法接收到异常信息。通过搜索发现，文件上传只是出现了异常，并不代表接口终止，返回参数是无法接收到的。如果不出现上面这个问题，假设前端能接收到返回信息，我也不会采用这种方式。因为，文件上传异常抛出的前提是文件大小超过了才报错，也就是说当上传比限制大小大的文件时，文件也会上传，当后端接收的文件大小刚超过限制大小时才报异常，不会在文件上传之前检测。开始上传时，不说明情况，当快上传成功时，报错异常，这是完全浪费带宽和上传者时间的行为。还有就是，我上传有分段上传模式，一般分段大小都不会大，小于文件大小限制，就会出现一种情况，我上传多大文件，都不会触发文件大小限制。因此，前端在文件上传之前进行大小检测是非常有必要的。同时，上传文件超出限制异常处理方法我也会删除掉，不会出现在之后的代码中，这里完全为了和小伙伴们解释原因。

2.新增常量参数配置

1.此常量参数是指com.ruoyi.constant.Constants类中的常量参数，可以修改云盘文件夹根节点名称、云盘文件夹根节点父ID、分段上传路径前缀和分段信息保存在redis的前缀。当数据库中没有文件夹信息时，会根据云盘文件夹根节点名称和云盘文件夹根节点父ID信息创建个根节点文件夹。

2.分段上传路径是在文件上传文件夹下，新增名称为分段上传路径前缀的文件夹，用于保存分段文件。文件上传文件夹默认是文件路径 + “/upload”，如果想修改，可以打开com.ruoyi.common.config.RuoYiConfig类，进行修改。

3.分段信息保存在redis的前缀，根据名称就知道是干什么用的。

3.自带常量参数配置

此常量参数是指com.ruoyi.common.constant.Constants类中的常量参数，一般不需要修改，如果修改了RESOURCE_PREFIX的值，需要将前端src\api\preview\preview.js文件中的profilePath值同步修改。

4.上传文件类型配置

打开com.ruoyi.common.utils.file.MimeTypeUtils类，设置DEFAULT_ALLOWED_EXTENSION的值，前端上传文件类型限制会从这里读取值。

5.文件预览配置

默认开启预览缓存，并且配置了定时清理任务，默认是每个月末凌晨3点清理缓存。其他配置参数如何使用，可以查看我的文章《以kkFileView为基础，可嵌入项目的前后端分离版（springboot+vue）文件预览系统结合若依框架前后端分离版的使用》。

2.前端配置

1.依赖插件

// 若依自带插件
"@riophae/vue-treeselect": "0.4.0"
"splitpanes": "2.4.1"
"axios": "0.28.1"

// 新增插件
"spark-md5": "^3.0.2"
"mime-db": "^1.53.0"

2.上传模式切换

1.启动程序后，打开系统管理->参数设置菜单，找到后面三个文件管理相关的配置，每个配置备注都介绍非常清楚了。

3.菜单配置

特殊功能按钮均配置权限，勾选功能，显示相应按钮。使用文件管理功能，最少配置文件夹列表查询和文件列表查询权限。其他权限，根据实际需要进行配置。后面会具体介绍权限问题。

4.定时清理

打开系统监控->定时任务菜单，里面已经设置了定时清理文件块任务，默认是每个月末凌晨3点清理块信息，可以根据实际情况修改。这些块信息只是分段上传过程中终止，并且没有再次进行上传的数据。对于成功上传的文件，会自动清理块信息，不需要定时任务进行清理。

5.重要功能介绍

1.权限关系

目前权限配置能够满足大部分需要，下面表格是菜单按钮和权限标识对应的接口。如果需要更加细致的权限划分，可以根据表格信息进行修改。

名称	标识	接口	类型	说明
文件夹权限关系
列表查询	py:cloud:folder:list	/py/folder/getList	get	查询文件夹信息列表
		/py/folder/getTreeList	get	查询树形文件夹信息列表
		/py/folder/getListAndAddRoot	get	获取所有的文件夹列表信息，如果没有文件夹信息，新增根节点信息
查询	py:cloud:folder:query	/py/folder/{folderId}	get	获取文件夹信息详细信息
新增	py:cloud:folder:query	/py/folder	post	新增文件夹信息
修改	py:cloud:folder:edit	/py/folder	put	修改文件夹信息
删除	py:cloud:folder:remove	/py/folder/{folderIds}	delete	删除文件夹信息
文件权限关系
列表查询	py:cloud:file:list	/py/file/getList	get	查询文件信息列表
		/py/file/getRemoveList	get	查询已删除的文件信息列表
查询	py:cloud:file:query	/py/file/{fileId}	get	获取文件信息详细信息
新增	py:cloud:file:add	/py/file	post	新增文件信息
		/py/file/addFile	post	新增单个文件信息
		/py/file/addChunk	post	上传文件块
		/py/file/mergeChunk	post	合并文件块
修改	py:cloud:file:edit	/py/file	put	修改文件信息
删除	py:cloud:file:remove	/py/file/{fileIds}	delete	删除文件信息
恢复	py:cloud:file:restore	/py/file/restore/{fileIds}	put	恢复删除的文件
		/py/file/restoreFile/{fileIds}	put	恢复已删除文件夹的文件
回收站文件删除	py:cloud:file:delete	/py/file/delete/{fileIds}	delete	物理删除文件信息
无	无	/py/file/getChunk	get	获取块信息
无	无	/py/file/getFileConfig	get	获取文件配置

2.文件上传过程

1.格式检查

获取后端的格式配置，后端文件格式限制是扩展名的方式，但是el-upload只支持mime文件格式。通过插件“mime-db”将文件扩展名转换为mime并传到el-upload中，只需要后端配置文件格式，前端自动同步。el-upload上传了accept值后，只是有个自定义文件格式，还是可以通过选择全部，上传其他类型的文件。可以再文件上传之前再检查一次文件格式是否正确。

2.大小检查

通过后端获取文件大小限制，在文件上传之前进行检查。对于单文件限制很简单，如果大于文件限制，提示错误信息。对于多文件限制，总文件大小是依次相加的方式，当超过限制后，之后的文件不允许上传了，并提示错误信息。

3.上传方式

在页面创建时就已经获取到了参数配置中的上传方式，如果不是分段上传，使用el-upload默认的上传方式，进行直接上传，当做普通上传处理，不需要后面复杂的过程。如果是分段上传，继续进行。

4.选择上传

获取参数配置中最小分块大小，判断文件大小是否比最小分块大小大。如果比分块大小小，采用直接上传的方式，上传后进行显示即可。如果比分块大小大，继续进行。

5.唯一标识

通过"spark-md5"插件获取文件唯一标识。为了更好的区分，我在唯一标识前面拼接了用户名。如果文件上传出现了问题，同一个用户再次上传同一文件时，能够继续上次的上传过程。我会将上传成功的块信息保存在redis数据库中，实现了文件上传的电脑和浏览器没有限制。

6.分块上传

获取参数配置中的分块大小和数据库中的块信息，如果当前文件的块信息，根据块信息继续上传文件。如果没有当前文件的块信息，依次上传文件信息，将块信息保存在redis。所有文件块上传完成后，调用合并接口，合并文件，保存文件信息到数据库，并清理块信息。特别注意，分段上传所有接口调用都要用原生的axios，不要用若依封装好的request方法，因为有概率触发其重复提交数据报错，哪怕是调用合并接口也不要使用request。

7.禁用上传

由于分段上传时，有概率多次上传一个文件，这样就容易导致分段上传混乱。为了防止这种情况发生，当点击上传后，就会禁用上传按钮，只有这一次上传所有文件结束后，才再次开启上传功能。

6.总结和代码获取方式

1.总结

以后的文章对于若依框架如何启动这种基础问题，不会再进行介绍了，原来那些文章还会介绍是因为照顾新接触若依框架的小伙伴。以后，我直接附带链接，不会过多说明，请大家见谅。我会将重要部分进行详细介绍。虽然5.2.2文件上传过程一点代码没有，但是我感觉这才是文章最关键的部分，希望能够给大家提供一点思路。如果大家对若依框架、java、Vue和uniapp等内容感兴趣，可以关注我，我会不定时发布一些文章。大家放心，绝大部分是免费内容，我会根据工作量判断是否需要收费。

2.代码获取方式

在文章开始，我就强调代码是收费的，请大家见谅！需要打赏文章10元，然后私信给我截图和QQ号，我拉进群自行下载。如果已经打赏过我的其他文章，已经加了我QQ号，可以打赏8元，然后QQ私信我，我拉你入新群。8元红包需要打赏两次（6元+2元），如果怕麻烦，也可以直接打赏10元。我觉得如果不是特别需要，真的没必要花钱获取资源。打赏这篇文章会进入我的文章《以kkFileView为基础，可嵌入项目的前后端分离版（springboot+vue）文件预览系统结合若依框架前后端分离版的使用》同一群，也就是说，打赏一次会同时获取这两个资源。

如果大家对这个文章还算满意，就给个赞吧，您的支持就是我最大的动力。如果大家需要文件预览和流程管理相关资源，可以查看我的主页文章。最后，谢谢大家的支持。