當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/3/19 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 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实现注册时头像上传与下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SpringBoot处理JSON数据
下一篇： SpringData核心数据访问接口--