1.创建SpringBoot项目
本项目采用springboot + mybatis-plus +jquery +thymeleaf组成
2.项目流程图
编辑
3.在pom中添加以下依赖
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!--lombok依赖-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--文件上传依赖-->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<!-- mysql的依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- mybatis-plus依赖 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.2</version>
</dependency>
|
4.在application.properties配置文件中
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
spring.resources.static-locations=classpath:/static
server.port=8000
#设置上传图片的路径
file.basepath=D:/BaiduNetdiskDownload/
# 设置单个文件大小
spring.servlet.multipart.max-file-size= 50MB
# 设置单次请求文件的总大小
spring.servlet.multipart.max-request-size= 50MB
##设置要连接的mysql数据库
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf8&autoReconnect=true&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
|
5.在数据库创建表
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
create table file
(
id INTEGER primary key AUTO_INCREMENT comment 'id',
path varchar(100) not null COMMENT '相对路径',
name varchar(100) COMMENT '文件名',
suffix varchar(10) COMMENT '文件后缀',
size int COMMENT '文件大小|字节B',
created_at BIGINT(20) COMMENT '文件创建时间',
updated_at bigint(20) COMMENT '文件修改时间',
shard_index int comment '已上传分片',
shard_size int COMMENT '分片大小|B',
shard_total int COMMENT '分片总数',
file_key varchar(100) COMMENT '文件标识'
)
|
将静态资源复制到项目中
编辑
在页面中引入组件文件并初始化组件
您可以在任何页面引入组件并进行使用，将上传组件作为通用基础组件来使用。
编辑
2.后端引入
引入后端逻辑实现模块
编辑
引入接口模块
您可以修改这些接口实现逻辑，以满足实际的业务需求。
编辑
3.引入配置文件
编辑
确保配置文件加载路径正确
编辑
效果：
多标签
编辑
单面板
编辑
注意事项
使用代码前请修改配置文件中的 数据库连接
示例下载地址：
asp.net源码下载，jsp-springboot源码下载，jsp-eclipse源码下载，jsp-myeclipse源码下载，php源码下载，csharp-winform源码下载，vue-cli源码下载，c++源码下载