• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

学会文件上传SpringBoot+form表单实现文件上传

武飞扬头像
全栈小白.
帮助1

唠嗑部分

平时我们在项目过程中,往往会遇到这种情况,比如:我的用户应该有一个头像,那就涉及到文件上传,那么文件应该如何存储呢?

这就会有很多方式

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上传方式、阿里云对象存储)

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgikjfc
系列文章
更多 icon
同类精品
更多 icon
继续加载