【一文学会文件上传】SpringBoot+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-iogroupId>
        <artifactId>commons-ioartifactId>
        <version>2.0version>
    dependency>
    <dependency>
        <groupId>commons-fileuploadgroupId>
        <artifactId>commons-fileuploadartifactId>
        <version>1.2.1version>
    dependency>
    
    <dependency>
        <groupId>org.projectlombokgroupId>
        <artifactId>lombokartifactId>
        <version>1.18.20version>
    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: [email protected]
 * @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 创建工程&导入依赖

<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-parentartifactId>
        <groupId>org.springframework.bootgroupId>
        <version>2.4.2version>
        <relativePath/>
    parent>
    <modelVersion>4.0.0modelVersion>

    <groupId>com.cxsgroupId>
    <artifactId>springboot-file-uploadartifactId>
    <version>1.0-SNAPSHOTversion>

    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>
        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
        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上传方式、阿里云对象存储)