这才是文件上传和下载的正确方式!
2023-02-18 16:38:30 时间
1.效果演示
2.技术栈
- maven
- springboot
- mybatis-plus
- mysql
- thymeleaf
- bootstrap
3.数据库表
CREATE TABLE `t_upload_file` (
`id` bigint(11) NOT NULL AUTO_INCREMENT,
`old_name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`new_Name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`url_path` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`size` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`file_type` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
`created_date` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=40 DEFAULT CHARSET=utf8;
4.创建 springboot 项目
5.引入依赖
这里我们主要引入以下依赖:
- web
- mybatis-plus
- mysql 驱动
- thymeleaf
- commons-fileupload
- lombok
commons-fileupload
是一个上传文件的组件,该组件封装了一些上传文件的方法。
<!-- web-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mybatis-plus 依赖-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.0</version>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
6.修改配置文件
这里主要包含数据源、thymeleaf、mybatis-plus 三个模块的配置。
7.代码生成
这里使用 mybatis-plus 的代码生成工具自动生成 controller、entity、service、mapper,极大地提高代码开发效率。
记得添加以下依赖:
<!-- 代码生成器 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.5.1</version>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
</dependency>
输入表名然后运行该程序:
8.前端
前端主要使用了 thymeleaf 和 bootstrap。Thymeleaf 是一种模板引擎技术,bootstrap 是 Twitter 推出的前端开发框架。
新建 index.html 文件,分别引入 bootstrap 的 css 和 Thymeleaf 的命名空间。
9.文件列表功能
后端:
查询列表数据,封装到 model 里面,然后跳转到列表页面。
前端:
列表页面使用 Thymeleaf 常用的标签:
10.文件上传
前端表单发起 post 请求,切记 enctype 格式是 multipart/form-data。
<form method="post" enctype="multipart/form-data" th:action="@{/file/upload}">
<input type="file" name="multipartFile">
<input type="submit" style="margin-top:20px" value="点击上传" class="btn btn-primary btn-sm"/>
</form>
后端用 MultipartFile 类型的对象接收文件,然后将文件拷贝到固定格式文件夹下:
/项目根路径/static/files/20xx-xx-xx/xxxx.jpg
其中上传文件的核心代码:
multipartFile.transferTo(new File(finalFile, newName));
我们发现 transferTo 方法核心还是 IO 的读写操作:
11.文件下载
1.先根据文件 id 查询文件信息,然后根据文件所在路径和文件名获取文件输入流。
2.设置响应头的扩展头、下载文件的名称。
3.获取文件输出流。
4.关闭文件输入输出流。
12.删除文件
1.先根据文件 id 查询文件信息,然后根据文件所在路径和文件名获取 file 对象。
2.如果 file 对象存在就删除该文件。
3.删除数据库中该文件信息。
13.项目完整代码
链接:https://pan.baidu.com/s/1LODyH8TcVxnKqYprPoOo7g?pwd=1234
提取码:1234
-END-
相关文章
- 我以订披萨为例,给女朋友详细讲了Java设计模式的3种工厂模式
- 【架构师(第二十五篇)】编辑器开发之属性编辑区域表单渲染
- 【架构师(第二十六篇)】编辑器开发之属性编辑同步渲染
- 2021年度“CCF-腾讯犀牛鸟基金”发布结题评优结果
- 【架构师(第二十七篇)】前端单元测试框架 Jest 基础知识入门
- 太空噗|重燃太空热潮!与噗噗星人一同探索星海浪漫
- 算法工程师深度解构ChatGPT技术
- 【架构师(第二十八篇)】 测试工具 Vue-Test-Utils 基础语法
- 【架构师(第二十九篇)】Vue-Test-Utils 触发事件和异步请求
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 【架构师(第三十一篇)】前端测试之 TDD 的开发方式
- 【架构师(第三十二篇)】 通用上传组件开发及测试用例
- 【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
- 【架构师(第三十四篇)】 业务组件库开发之 vue3 的插件系统
- 【架构师(第三十五篇)】 业务组件库开发之使用 Rollup 进行打包
- 【架构师(第三十六篇)】 业务组件库开发之发布到 NPM
- 【架构师(第四十二篇)】 服务端开发之常用的登录鉴权方式
- 【架构师(第四十三篇)】 服务端开发之单元测试和接口测试
- 【架构师(第四十四篇)】 服务端开发之 pm2 和 nginx 介绍
- 【架构师(第四十六篇)】 服务端开发之安装 Docker