全栈小白
2023-03-15 14:49:37
一文学会文件上传-第一节:form表单域方式
原创声明:本人所发内容及涉及源码,均为亲手所撸,如总结内容有误,欢迎指出
唠嗑部分
平时我们在项目过程中,往往会遇到这种情况,比如:我的用户应该有一个头像,那就涉及到文件上传,那么文件应该如何存储呢?
这就会有很多方式
1、最简单的就是存在服务器上,这就要考虑到服务器的磁盘大小、文件的备份、容灾...
2、还有就是xx云的存储方式,使用是免费的,但是流量要收费。
文件上传的方式也会有很多,总结一下,无非也就两种
1、使用form表单的file域进行文件上传
2、使用h5提供的FormData方式,ajax会用这种方式
form表单的几个参数
1、action:提交的服务器地址
2、method:请求方式
3、enctype:表单的编码方式
使用form进行文件上传的步骤
1、请求方式为POST
2、使用input的file域
3、form表单的enctype设置为 multipart/form-data
言归正传
一、servlet-Form表单上传文件
1.1 创建项目&环境搭建
<dependencies> <!-- 文件上传需要的两个依赖包--> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.0</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.1</version> </dependency> <!-- lombok依赖--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.20</version> </dependency> </dependencies>
1.2 页面结构搭建
<div class="all"> <form method="post" action="/upload" enctype="multipart/form-data"> 用户名: <input name="username" type="text"/><br/> 密码: <input name="password" type="password"/><br/> 头像:<input type="file" name="file"/><br/> <button type="submit">提交</button> </form> </div>
1.3 后台servlet接口实现
根据是否是文件上传表单项分别处理
// 处理编码 req.setCharacterEncoding("utf-8"); User user = new User(); //1.先判断上传的数据是否为多段数据(只有多段数据,才是文件上传的) if(ServletFileUpload.isMultipartContent(req)) { //创建FileItemFactory工程实现类 FileItemFactory fileItemFactory = new DiskFileItemFactory(); //创建用于解析上传数据的工具类ServletFileUpload ServletFileUpload servletFileUpload = new ServletFileUpload(fileItemFactory); try { //解析上传的数据,得到每一个表单项 List<FileItem> fileItems = servletFileUpload.parseRequest(req); for (FileItem fileItem : fileItems) { if (fileItem.isFormField()) { //true普通表单项 PropertyDescriptor pd = new PropertyDescriptor(fileItem.getFieldName(), User.class); Method writeMethod = pd.getWriteMethod(); writeMethod.invoke(user, fileItem.getString("UTF-8")); } else { // 上传文件,返回路径 String filePath = FileUploadUtil.upload(fileItem); user.setAvatar(filePath); } } System.out.println(user); } catch (Exception e) { e.printStackTrace(); } } else { // 非文件上传,直接获取表单值,封装user,做具体操作... Map<String, String[]> parameterMap = req.getParameterMap(); } // 进行操作,只是举例 // userService.sqveUser(user);
1.4 文件上传工具类
/** * @Project: file-upload-demo * @Author: cxs2014501@163.com * @Create: 2023/3/6 16:31 * @Description: **/ public class FileUploadUtil { public static String upload(FileItem fileItem) throws Exception { // 文件存储位置 String address = "E:\\ideaProjects\\aaa\\file-upload-demo\\images"; //文件的绝对地址 String solutionAddress = address + File.separator + fileItem.getName(); File file = new File(solutionAddress); if (!file.exists()) { file.createNewFile(); } fileItem.write(file); return solutionAddress; } }
1.5 测试结果
二、SpringBoot-Form表单上传文件
2.1 创建工程&导入依赖
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>spring-boot-starter-parent</artifactId> <groupId>org.springframework.boot</groupId> <version>2.4.2</version> <relativePath/> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.cxs</groupId> <artifactId>springboot-file-upload</artifactId> <version>1.0-SNAPSHOT</version> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> </dependencies> </project>
2.2 页面结构index.html
<div class="all"> <form method="post" action="/upload" enctype="multipart/form-data"> 用户名: <input name="username" type="text"/><br/> 密码: <input name="password" type="password"/><br/> 头像:<input type="file" name="file"/><br/> <button type="submit">提交</button> </form> </div>
2.3 后台接口
@PostMapping("/upload") public Object saveUser(User user, @RequestParam("file") MultipartFile file){ try { if (!ObjectUtils.isEmpty(file)) { // 获取源文件的名字 String originalFilename = file.getOriginalFilename(); if (StringUtils.hasLength(originalFilename)) { // 进行文件上传 String fullPath = PATH + File.separator + originalFilename; File f = new File(fullPath); if (!f.exists()) { f.createNewFile(); } file.transferTo(f); user.setAvatar(fullPath); } } System.out.println(user); // 保存user 如 userService.saveUser(user); } catch (IOException e) { e.printStackTrace(); } return null; }
2.4 测试结果
2.5 补充一下哈
文件解析器MultipartResolver,SpringBoot已经帮我们配置好了,SpringMvc就不演示了,环境搭建太麻烦了
配置类如下,有兴趣可以了解一下
结语
1、由于篇幅原因,本文到这就结束了
2、关于文件上传的其他方式,我们后续也会补充(ajaxd使用FormData上传方式、阿里云对象存储)
评论