Springboot文件上传(六)

深藏阁楼爱情的钟 2022-02-20 09:09 120阅读 0赞

> 上章我们讲解了MongoDB的集成，现在我们开始下一篇，文件上传的简单集成。

### 一、前言 ###

>       1.上传文件是互联网中应用的场景之一,最典型的情况就是上传头像等。文件上传主要是将文件通过IO流传输到服务器的某一个特定的文件夹下。
> 
>       **2.**上传文件，必须将表单method设置为post，并将enctype设置为multipart/form-data。只有这样，浏览器才会把用户所选文件的二进制数据发送给服务器。SpringMVC在文件上传时，会将上传的文件映射为MultipartFile对象，并对MultipartFile对象进行文件的解析和保存。

--------------------

###  二、MultipartFile接口的方法 ###

> byte\[ \] getBytes( )：获取文件数据
> 
> String getContentType( )：获取文件MIME类型，如application/pdf、image/pdf等
> 
> InputStream getInputStream( )：获取文件流
> 
> String getOriginalFileName( )：获取上传文件的原名称
> 
> long getSize( )：获取文件的字节大小，单位为byte
> 
> boolean isEmpty( )：是否有上传的文件
> 
> void transferTo(File  dest)：将上传的文件保存到一个目标文件中。

--------------------

### 三、简单配置 ###

** 3.1 引入pom.xml内容**

引入了spring-boot-starter-thymeleaf做页面模板引擎，写一些简单的上传示例。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

** 3.2 application.properties配置文件**

#thymeleaf
    spring.thymeleaf.prefix=classpath:/templates/
    spring.thymeleaf.suffix=.html
    spring.thymeleaf.mode=LEGACYHTML5
    spring.thymeleaf.encoding=UTF-8
    spring.thymeleaf.content-type=text/html
    # 禁用 thymeleaf 缓存
    spring.thymeleaf.cache=false
    
    # 上传文件总的最大值
    spring.servlet.multipart.max-request-size=10MB
    # 单个文件的最大值
    spring.servlet.multipart.max-file-size=10MB
    # 是否支持批量上传   (默认值 true)
    spring.servlet.multipart.enabled=true
    # 上传文件的临时目录 （一般情况下不用特意修改）
    spring.servlet.multipart.location=
    # 文件大小阈值，当大于这个阈值时将写入到磁盘，否则存在内存中，（默认值0 一般情况下不用特意修改）
    spring.servlet.multipart.file-size-threshold=0
    # 判断是否要延迟解析文件（相当于懒加载，一般情况下不用特意修改）
    spring.servlet.multipart.resolve-lazily=false

**3.3 static和templates介绍**

>               在**src/main/resources**目录下新建static目录和**templates**目录。**SpringBoot**官方文档告诉我们，**statis**这个目录里面应该存放一些静态文件，比如 **css、js、image**并且可以直接被外部访问到。而templates这个目录则存放一些静态页面，如**jsp、html、ftl**。并且**template**这个目录里的内容外部是访问不到的。按照规范，我们将**singleFile.html**和**multipleFiles**文件放到**templates**目录下。

--------------------

### **四、单文件上传** ###

**4.1创建单文件singleFile.html页面**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>单文件上传</p>
    <form method="POST" enctype="multipart/form-data" action="upload" >
        文件：<input type="file" name="file"/>
        <input type="submit"/>
    </form>
    <hr/>
    </body>
    </html>

**4.2 在控制层FileUploadController中添加singleFile方法**

@PostMapping("/singleFile")
    @ResponseBody
    public String singleFile(@RequestParam("file") MultipartFile file) {
        //判断非空
        if (file.isEmpty()) {
            return "上传的文件不能为空";
        }
        try {
            // 测试MultipartFile接口的各个方法
            LOGGER.info("[文件类型ContentType] - [{}]",file.getContentType());
            LOGGER.info("[文件组件名称Name] - [{}]",file.getName());
            LOGGER.info("[文件原名称OriginalFileName] - [{}]",file.getOriginalFilename());
            LOGGER.info("[文件大小] - [{}]",file.getSize());
            //文件路径
            String path = "D:\\Program Files\\upload\\";
            LOGGER.info(this.getClass().getName()+"图片路径："+path);
            File f = new File(path);
            //如果不存在该路径就创建
            if (!f.exists()) {
                f.mkdir();
            }
            File dir = new File(path + file.getOriginalFilename());
            // 文件写入
            file.transferTo(dir);
            return "上传单个文件成功";
        } catch (Exception e) {
            e.printStackTrace();
            return "上传单个文件失败";
        }
    }

**4.3 测试**

启动项目，输入http://localhost:8080/singleFile，进入上传单文件页面，然后选择要上传的图片。如下图：

![20190413115301861.png][]

我选择文件名称为**瓜子二手车**的图片，然后点击提交按钮返回成功信息。

然后看上传的结果以及图片地址。

![20190413115356215.png][]

![20190413115406229.png][]

这样单文件上传就完成了。

--------------------

###  五、多文件上传 ###

多文件上传页面只是比单文件上传多了file选择的input而已，multipleFiles内容如下：

**4.1创建multipleFiles.html页面**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <p>多文件上传</p>
    <form method="POST" enctype="multipart/form-data" action="multipleFiles">
        <p>文件1：<input type="file" name="file"/></p>
        <p>文件2：<input type="file" name="file"/></p>
        <p><input type="submit" value="上传"/></p>
    </form>
    </body>
    </html>

**4.2 在控制层FileUploadController添加multipleFiles方法**

@PostMapping("/multipleFiles")
    @ResponseBody
    public String multipleFiles(@RequestParam("file") MultipartFile[] files, HttpServletRequest request) {
        //List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");
        if (null == files && files.length == 0) {
            return null;
        }
        String filePath = "D:\\Program Files\\upload\\";
        for (MultipartFile mf : files) {
            //文件名称
            String filename = mf.getOriginalFilename();
            if (mf.isEmpty()) {
                return "文件名称："+ filename +"上传失败，原因是文件为空!";
            }
            File dir = new File(filePath + filename);
    
            try {
                //写入文件
                mf.transferTo(dir);
                LOGGER.info("文件名称："+ filename +"上传成功");
            } catch (IOException e) {
                LOGGER.error(e.toString(), e);
                return "文件名称："+ filename +"上传失败";
            }
        }
        return "多文件上传成功";

**4.3测试**

启动项目，输入http://localhost:8080/multipleFiles，进入上传多文件的页面，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1Zm9yZXZlcmxvdmU_size_16_color_FFFFFF_t_70][]

选择文件名称为**码农新锐**和**梅花**的图片，然后点击提交按钮返回成功信息。

![20190413115654796.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1Zm9yZXZlcmxvdmU_size_16_color_FFFFFF_t_70 1][]

--------------------

### 六、总结 ###

> 1、表单method设置为post，并将enctype设置为**multipart/form-data**

> 2、文件映射为**MultipartFile**对象进行解析

> 3、上传文件大小**spring.http.multipart.max-file-size**限制

> 4、html中input里name的值要和**@RequestParam("file")**中的值保持一致

[20190413115301861.png]: /images/20220220/cabfd37ed9464f8b891c0d6791a946cf.png
[20190413115356215.png]: /images/20220220/818dbba808a64a06b82b130dfff3f05d.png
[20190413115406229.png]: /images/20220220/a228b44283854699bf4b094fcb4d5cb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1Zm9yZXZlcmxvdmU_size_16_color_FFFFFF_t_70]: /images/20220220/4001cffc24b049bca679be6f57f29355.png
[20190413115654796.png]: /images/20220220/24872005a0c342d799797a9675f9e3b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1Zm9yZXZlcmxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20220220/c8da233bdd95418d9e26274c2d9dc286.png