"嘿，亲爱的小伙伴们！👋 今天我怀揣着满满的热情，精心准备了一篇文章，希望能像一缕清风，拂过我们求知的心田，带来一些新的思考与启发。让我们携手并进，在知识的海洋中扬帆远航，共同探索、学习、成长吧！🌟"
需要若依官网下载一份若依前后端分离版的工程项目，并且能在本地成功运行。
运行若依前后端分离版，电脑需要安装以下软件环境：
- JDK1.8.x
- MySQL8.0.x
- Redis3或者Redis5都可以
- Maven3.6.1
- Node.js v12.18.0及以上版本
如果是新手，建议软件环境的版本与我所用的保持一致。
具体如何运行若依前后端分离项目，可去网上查询相关的资料，这里就不过多的讲解如何运行若依的前后端分离项目。
找到ruoyi-ui的项目工程，在对应目录的导航栏上输入cmd后回车（或者使用Vs Code或者WebStorm打开此项目工程，然后打开Terminal），在相关的窗口输入以下安装命令即可成功安装这些依赖
安装完成后，我们打开项目工程中的package.json文件，如果文件中出现如下图所示的依赖，表示已经安装成功。
如（三）中的流程所示，上传前先会进行MD5的校验，根据文件内容生成的MD5值查询表中是否存在此文件，如果查询出存在此文件，则告诉前端从第几片开始传，反之则会从第一片开始传。
这里，我将文件上传进行了暂停的操作，这里展示一下文件上传暂停后是以什么样的形式存储的。
上图就是文件一个一个的分片，一个分片是5M
从图中上传的请求中，可以看到一共是189个分片，当它传到143片时，我点下了暂停键。
从请求中可以看到分片的大小是，文件总大小totalSize是，这里用文件总大小/分片大小得到了分片总数，一共是189片（这里是四舍五入后得到的）。
当所有的分片文件上传成功后，会进行合并。
合并成功后，会返回一个成功success的标识并自动关闭文件列表弹窗，然后重新请求文件管理列表数据。
（1）设计好对应的数据库，实现文件断点续传、闪传，需要新建两个数据表，一个是文件分片记录表，一个是已上传文件记录表。相关的数据表如下:
（2）新建ruoyi-fileupload模块，在pom.xml文件中将ruoyi-common引入进来
（3）相关代码
后端所用的实体类
文件分片
文件列表
文件列表展示VO
分片上传检查实体类
后端Controller控制层
后端Service业务实现层
主要逻辑：当点击上传按钮上传文件时，前端它会把上传的文件根据你设定的分块的大小切分成多少块，而且会根据文件的内容计算出一个md5值，计算好之后，它会到后端先请求/fileUpload/api/upload这个接口（注意：controller控制层中这个接口有两个请求），首先它会走get请求，检查上传的文件是否已经存在，如果存在，直接返回true，证明上传过，会直接返回一个地址。检查完成后，如果它发现文件没有上传过，它会再发一个post请求。这里会根据你自定义分片的大小，把文件内容给你传过来，后端获取到后，会开始写入（因为这个项目过程中我没有配置OSS对象存储，所以我将文件是保存到了本地）。写完后，它会往sys_chunk这张表中添加一条数据，当chunkNumber 等于 分块的总数时，前端就会触发合并的请求，合并的方法中，会到你指定的位置去获取文件（这里文件夹的名称，就是你文件的md5值），获取完文件后会对文件进行排序（升序排列），排序完成后，会通过缓冲流逐个合并文件，合并完成后 ，会将其写入到你的目的地，最后再把原先的分块文件删掉。
前端相关的代码
前端上传的组件使用的是vue-simple-uploader，组件官方地址github.com/simple-uplo…
文件列表页面
上传组件部分的源码
main.js中添加图中框选的内容
vue.config.js中添加图中框选的内容
在App.vue中添加图中框选的内容
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/23977.html