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中的状态

九、实现下载

单击下载页面的下载链接

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

SpringBoot实现注册时头像上传与下载相关推荐

php的注册头像上传,用Ajax实现注册与头像上传功能
这次给大家带来用Ajax实现注册与头像上传功能,Ajax实现注册与头像上传功能的注意事项有哪些,下面就是实战案例,一起来看一下. 在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册 ...
java注册头像_注册页面头像上传的实现(javaweb相关)
注册页面头像上传的实现: 1. 注册页面:register.jsp 两种方式实现图片上传: pageEncoding="UTF-8"%> register body{ mar ...
Android实现注册登录头像上传等功能常规开发(Android端，服务器端开发实例)
Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例) 标签: 注册登录Android开发servlet 2017-04-18 20:34 454人阅读评论(1) ...
SpringBoot实现oss文件的上传与下载
SpringBoot实现oss文件的上传与下载最近项目中需要通过OSS来实现文件的上传和下载以及根据oss文件(word模板)生成Word,特此记录,以便日后查阅. 一.相关概述 OSS对象存储 ...
SpringBoot+Vue3实现文件的上传和下载
目录前言上传前端页面上传后端代码下载后端代码下载前端代码总结参考文献前言上传文件和下载文件是我们平时经常用到的功能,接下来就让我们用SpringBoot,Vue3和ElementPl ...
Springboot集成阿里云OSS上传及下载
文章目录使用手册 maven依赖及环境配置定义配置bean及OSS工具类定义UploadController和DownloadController 下载接口优化为返回重定向oss路径遇到的问题 ...
Springboot中常用的文件上传和下载通用接口
记录下通用的文件上传和下载接口,一般的开发中都是会使用到的,不过写的最简单的版本. 文章目录程序测试本文小结程序测试在yml中配置一个文件保存的路径 #保存文件的路径 common:file: ...
Springboot实现简单的文件上传和下载功能
一.第一步, 第一步依然是创建数据库,我简单设计了三个字段(file_id,file_name,create_time) CREATE TABLE `txtfile` (`file_id` int N ...
解决springboot项目部署时视上传视频太大导致的内存溢出问题
在项目部署时输入命令java -Xms512m -Xmx1024m -jar 项目名.jar

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

SpringBoot实现注册时头像上传与下载相关推荐

最新文章

热门文章