javascript
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 所以要加上版本
代碼：
<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">
? <modelVersion>4.0.0</modelVersion>
? <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>
? <!--??
??spring-boot-starter-parent是Spring Boot的核心啟動器，
??包含了自動配置、日志和YAML等大量默認的配置，大大簡化了我們的開發。
??引入之后相關的starter引入就不需要添加version配置，
???? spring boot會自動選擇最合適的版本進行添加。
? -->
? <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>
?
? ?<!-- 添加spring-boot-starter-web模塊依賴 -->
? ?<dependency>
??<groupId>org.springframework.boot</groupId>
??<artifactId>spring-boot-starter-web</artifactId>
?</dependency>
?
? ?<!-- 添加spring-boot-starter-thymeleaf模塊依賴 -->
? ?<dependency>
??<groupId>org.springframework.boot</groupId>
??<artifactId>spring-boot-starter-thymeleaf</artifactId>
?</dependency>
?
?<!-- Apache Commons FileUpload組件依賴，
??由于不屬于Spirng Boot，所以需要加上版本
??-->
??<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">
?<!-- .panel-heading 面板頭信息。 -->
?<div class="panel-heading">
??<!-- .panel-title 面板標題。 -->
??<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">
?<!-- .panel-heading 面板頭信息。 -->
?<div class="panel-heading">
??<!-- .panel-title 面板標題。 -->
??<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">
?<!-- .panel-heading 面板頭信息。 -->
?<div class="panel-heading">
??<!-- .panel-title 面板標題。 -->
??<h3 class="panel-title">文件上傳下載示例：文件下載</h3>
?</div>
</div>
<div class="container">
??<div class="panel panel-primary">
???<!-- .panel-heading 面板頭信息。 -->
???<div class="panel-heading">
????<!-- .panel-title 面板標題。 -->
????<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实现注册时头像上传与下载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot处理JSON数据
- 下一篇： SpringData核心数据访问接口--