SpringBoot实现注册时头像上传与下载

一、说明

1.为了能上传文件，必须将表单的method设置为POST,并将enctype设置为multipart/form-data。

2.SpringMVC为文件上传提供了直接的支持，这种支持是通过MultipartResolver实现的，SpringMVC使用Apache Commons FileUpload 技术实现了MultipartResolver实现类：CommonsMultipartResolver,因此SpringMVC的文件上传还需要依赖Commons FileUpload组件。

3.Spring Boot的spring-boot-starter-web已经集成了SpringMVC,所以使用SpringBoot完成文件上传更简单。

二、创建项目

1.创建一个Maven项目，命名为SpringBoot_fileuploadtest,按照Maven项目的规范，src/main下新建一个resources的文件夹，再在此文件夹下新建static以及template两个文件夹。

2.修改pom.xml

主要是引入Apache Commons 依赖

由于不属于Spring Boot 所以要加上版本

代码：

<groupId>org.fkit</groupId>
<artifactId>fileuploadtest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>fileuploadtest</name>
<url>http://maven.apache.org</url>

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>2.0.0.RELEASE</version>
  <relativePath/>
</parent>

   <properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  <java.version>1.8</java.version>
</properties>

<dependencies>


<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>


  <dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
  </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <scope>test</scope>
    </dependency>
</dependencies>
</project>

三、新建Index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>文件上传下载示例</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">

<div class="panel-heading">
  
  <h3 class="panel-title">文件上传下载示例：简单文件上传</h3>
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-8">
   <form class="form-horizontal" action="upload" enctype="multipart/form-data" method="post">
    <div class="form-group">
     <div class="input-group col-md-4">
      <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
      <input class="form-control" placeholder="文件描述" type="text" name="description" />
     </div>
    </div>
    <div class="form-group">
     <div class="input-group col-md-4">
      <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
      <input class="form-control" placeholder="请选择文件" type="file" name="file"/>
     </div>
    </div>
    <div class="form-group">
     <div class="col-md-4">
      <div class="btn-group btn-group-justified" >
         <div class="btn-group" >
           <button type="submit" class="btn btn-success" id="submitbtn">
           <span class="glyphicon glyphicon-share"></span> 文件上传</button>
         </div>
      </div>
     </div>
    </div>
   </form>
  </div>
</div>
</div>
</body>
</html>

四、新建FileUploadController

package com.ysh.fileuploadtest.controller;

import java.io.File;
import java.net.URLEncoder;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.http.ResponseEntity.BodyBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.ysh.fileuploadtest.domain.User;

@Controller
public class FileUploadController {

// 映射"/"请求
@RequestMapping("/")
public String index(){
// 根据Thymeleaf默认模板，将返回resources/templates/index.html
return "index";
}

// 上传文件会自动绑定到MultipartFile中
@PostMapping(value="/upload")
public String upload(HttpServletRequest request,
   @RequestParam("description") String description,
   @RequestParam("file") MultipartFile file) throws Exception{
  // 接收参数description
     System.out.println("description = " + description);
     // 如果文件不为空，写入上传路径
  if(!file.isEmpty()){
   // 上传文件路径
   String path = request.getServletContext().getRealPath(
                 "/upload/");
   System.out.println("path = " + path);
   // 上传文件名
   String filename = file.getOriginalFilename();
      File filepath = new File(path,filename);
   // 判断路径是否存在，如果不存在就创建一个
         if (!filepath.getParentFile().exists()) {
         filepath.getParentFile().mkdirs();
         }
         // 将上传文件保存到一个目标文件当中
   file.transferTo(new File(path+File.separator+ filename));
   return "success";
  }else{
   return "error";
  }

}

附：

SpringMVC会将上传文件绑定到MultipartFile对象中，MultipartFile提供了获取上传文件的内容、文件名等方法，通过transferTo()方法还可以将文件存储到磁盘中

五、测试运行文件上传

启动App,输入：http://localhost:8080/

文件上传页面

选择文件后

单击文件上传按钮，图片会被上传保存到项目的upload文件夹下，跳转到成功页面

此时控制台会输出上传文件的描述信息和保存路径

复制此路径，找到电脑上对应位置可以看到

照片已经成功上传

六、使用对象方式接受上传文件

在实际项目中，很多时候上传的文件会作为对象的属性保存

registerForm.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>文件上传下载示例</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">

<div class="panel-heading">
  
  <h3 class="panel-title">文件上传下载示例：用户注册</h3>
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-8">
   <form class="form-horizontal" action="register" enctype="multipart/form-data" method="post">
    <div class="form-group">
     <div class="input-group col-md-4">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input class="form-control" placeholder="用户名" type="text" name="username" />
     </div>
    </div>
    <div class="form-group">
     <div class="input-group col-md-4">
      <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
      <input class="form-control" placeholder="请选择头像" type="file" name="headPortrait"/>
     </div>
    </div>
    <div class="form-group">
     <div class="col-md-4">
      <div class="btn-group btn-group-justified" >
         <div class="btn-group" >
           <button type="submit" class="btn btn-success" id="submitbtn">
           <span class="glyphicon glyphicon-share"></span> 注册</button>
         </div>
      </div>
     </div>
    </div>
   </form>
  </div>
</div>
</div>
</body>
</html>

这是一个用户注册页面，需要输入用户名和上传用户头像

User.java:

package com.ysh.fileuploadtest.domain;

import java.io.Serializable;
import org.springframework.web.multipart.MultipartFile;

public class User implements Serializable{

private static final long serialVersionUID = 1L;

private String username;
// 对应上传的headPortrait，类型为MultipartFile，上传文件会自动绑定到image属性当中
private MultipartFile headPortrait;

public User() {
super();
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public MultipartFile getHeadPortrait() {
return headPortrait;
}
public void setHeadPortrait(MultipartFile headPortrait) {
this.headPortrait = headPortrait;
}

}

User是对用户信息的封装，属性headPortrait对应页面html的file类型，类型为MultipartFile，上传文件会自动绑定到headPortrait属性中

FileUploadController中添加：

@RequestMapping("/registerForm")
public String registerForm(){
return "registerForm";
}

@RequestMapping(value="/register")
public String register(HttpServletRequest request,
    @ModelAttribute User user,
    Model model)throws Exception{
  // 接收参数username
  System.out.println("username = " +user.getUsername());
  // 如果文件不为空，写入上传路径
  if(!user.getHeadPortrait().isEmpty()){
   // 上传文件路径
   String path = request.getServletContext().getRealPath(
                 "/upload/");
   System.out.println("path = " + path);
   // 上传文件名
   String filename = user.getHeadPortrait().getOriginalFilename();
      File filepath = new File(path,filename);
   // 判断路径是否存在，如果不存在就创建一个
         if (!filepath.getParentFile().exists()) {
         filepath.getParentFile().mkdirs();
         }
         // 将上传文件保存到一个目标文件当中
         user.getHeadPortrait().transferTo(new File(path+File.separator+ filename));
         // 将用户添加到model
         model.addAttribute("user", user);
         return "userInfo";
  }else{
   return "error";
  }
}

register方法使用@ModelAttribute注解将表单参数绑定到User对象

html控件的username会保存到Use对象的username属性

html控件的headPortrait会保存到User对象的headPortrait属性，转换成MultipartFile类型

文件上传成功后将用户信息保存到model当中，跳转到userInfo.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>文件上传下载示例</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-primary">

<div class="panel-heading">
  
  <h3 class="panel-title">文件上传下载示例：文件下载</h3>
</div>
</div>
<div class="container">
  <div class="panel panel-primary">
   
   <div class="panel-heading">
    
    <h3 class="panel-title">用户信息列表</h3>
   </div>
   <div class="panel-body">
    <div class="table table-responsive">
     <table class="table table-bordered table-hover" >
      <tbody class="text-center">
       <tr>
        <td><img th:src="@{'upload/'+${user.headPortrait.originalFilename}}" height="30"/></td>
        <td th:text="${user.username}">用户名</td>
        <td >
        <a th:href="@{download(filename=${user.headPortrait.originalFilename })}">下载头像</a>
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
  </div>
</div>
</body>
</html>

userInfo显示用户信息。

七、再次运行APP的main方法

在浏览器输入：http://localhost:8080/registerForm

输入badao，选择头像后，单击注册，跳转到用户信息界面

八、文件下载

单击上面的下载头像超链接，可以进入dowload控制器进行文件下载操作

文件下载，直接在页面上给出一个超链接，该链接的href属性等于要下载的文件名

SpringMVC提供了一个responseEntity类型，可以很方便地定义返回的HttpHeaders和HttpStatus。

FileUploadController中添加：

@RequestMapping(value="/download")
public ResponseEntity<byte[]> download(HttpServletRequest request,
    @RequestParam("filename") String filename,
    @RequestHeader("User-Agent") String userAgent,
    Model model)throws Exception{
  // 下载文件路径
  String path = request.getServletContext().getRealPath(
                "/upload/");
  // 构建File
  File file = new File(path+File.separator+ filename);
  // ok表示Http协议中的状态 200
        BodyBuilder builder = ResponseEntity.ok();
        // 内容长度
        builder.contentLength(file.length());
        // application/octet-stream ：二进制流数据（最常见的文件下载）。
        builder.contentType(MediaType.APPLICATION_OCTET_STREAM);
        // 使用URLDecoder.decode对文件名进行解码
        filename = URLEncoder.encode(filename, "UTF-8");
        // 设置实际的响应文件名，告诉浏览器文件要用于【下载】、【保存】attachment 以附件形式
        // 不同的浏览器，处理方式不同，要根据浏览器版本进行区别判断
        if (userAgent.indexOf("MSIE") > 0) {
                // 如果是IE，只需要用UTF-8字符集进行URL编码即可
                builder.header("Content-Disposition", "attachment; filename=" + filename);
        } else {
                // 而FireFox、Chrome等浏览器，则需要说明编码的字符集
                // 注意filename后面有个*号，在UTF-8后面有两个单引号！
                builder.header("Content-Disposition", "attachment; filename*=UTF-8''" + filename);
        }
        return builder.body(FileUtils.readFileToByteArray(file));
}

使用ResponseEntity对象，可以很方便地定义返回的BodyBuilder、HttpHeaders、和HttpStatus。

BodyBuilder对象用来构建返回的Body;

HttpHeaders类型代表的是HTTP中的头信息；

HttpStatus代表的是HTTP中的状态

九、实现下载

单击下载页面的下载链接

将其下载到桌面，此时在桌面上已经有这张图片了

如果这篇文章帮助到了你，欢迎打赏鼓励，您的鼓励是我最大的动力！