溫馨提示
Spring Boot會員管理系統的中,需要涉及到Spring框架,SpringMVC框架,Hibernate框架,thymeleaf模板引擎。所以,可以學習下這些知識。當然,直接入門的話使用是沒問題,但是,涉及到一些異常和原理的話可能就有些困難。
1. 前端部分
在前端部分addMember.html是通過form表單來提交會員的信息,其中就包括了圖片上傳功能(這里涉及了文件上傳操作),表單部分代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<form th:action= "@{/admin/addMember}" method= "post" enctype= "multipart/form-data" id= "addMember" > <div class = "file-field input-field" > <div class = "btn" > <span>選擇頭像文件</span> <input id= "file" type= "file" name= "iconPath" multiple= "" placeholder= "選擇文件" accept= "image/*" onchange= "changeToop()" > </div> <div class = "file-path-wrapper" > <!--<input class = "file-path validate" type= "text" placeholder= "Upload one or more files" >--> <img id= "myimg" src= "assets/iconPath/common.jpg" class = "img-responsive img-thumbnail" style= "width: 20%;height: 20%" /> </div> <!--頭像文件上傳預覽--> <script> function Id(id){ return document.getElementById(id); } function changeToop(){ var file = Id( "file" ); if (file.value=== '' ){ //設置默認圖片 Id( "myimg" ).src= 'assets/iconPath/common.jpg' ; } else { preImg( "file" , "myimg" ); } } //獲取input[file]圖片的url Important function getFileUrl(fileId) { var url; var file = Id(fileId); var agent = navigator.userAgent; if (agent.indexOf( "MSIE" )>= 1 ) { url = file.value; } else if (agent.indexOf( "Firefox" )> 0 ) { url = window.URL.createObjectURL(file.files.item( 0 )); } else if (agent.indexOf( "Chrome" )> 0 ) { url = window.URL.createObjectURL(file.files.item( 0 )); } return url; } //讀取圖片后預覽 function preImg(fileId,imgId) { var imgPre =Id(imgId); imgPre.src = getFileUrl(fileId); } </script> </div> ....... </form> |
這里有一個注意事項:因為涉及文件上傳,所以在form中需要加入enctype="multipart/form-data"
,而且就是input中的name屬性是與后端中的Controller映射方法的傳入參數名是一一對應的。
2. 后端代碼實現
后端中對于SpringMVC框架可以對于文件進行處理然后我們可以通過傳入參數的方式來接收文件
2.1 Controller處理傳入文件
代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
@PostMapping ( "/addMember" ) public String addMember(Member member, String gradeName, MultipartFile icon, Map<String, Object> model) { //處理上傳文件 try { if (icon == null ) //首先判斷上傳文件不為null return "error" ; if (icon.getOriginalFilename().equals( "" )) //如果上傳文件的原名為空字符串,則證明使用了默認圖像 member.setIconPath( "/assets/icon/common.jpg" ); //設置為我們的默認圖像路徑 else //這里通過了自己編寫的文件上傳工具類來處理上傳的MultipartFile,文件名設置為通過UUID產生的字符串 member.setIconPath(FileUploadUtil.upload(icon, "/assets/icon/" , UUIDRandomUtil.get32UUID())); } catch (Exception e) { e.printStackTrace(); return "error" ; } ....... return "addMemberSuccess" ; } |
2.2 FileUploadUtil工具類保存文件
在Controller的MultipartFile文件傳入后需要進一步,轉變為FIle并且保存到磁盤當中,所以我分開處理,把Controller的傳入文件交給FileUploadUtil工具類來處理,具體的代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
public class FileUploadUtil { / * * * 上傳文件 * @param multipartFile multipartFile * @param prefixPath 前綴路徑,相對于整個項目中的路徑,路徑最前面不用加入“ / ” * @param fileName 上傳后的文件名 * @ return 上傳后最終的相對路徑 + 文件名 * @throws Exception 有可能空指針異常和IO異常 * / public static String upload(MultipartFile multipartFile, String prefixPath, String fileName) throws Exception { / / 得出上傳的絕對路徑 String uploadPath = ClassUtils.getDefaultClassLoader().getResource(" ").getPath() +" / static" + prefixPath; File file = new File (uploadPath); if (! file .exists()) if ( file .mkdirs()) System.out.println( "成功創建目錄" ); / / 獲取上傳的后綴名 String suffixName = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf( "." )); / / 新建最終確定的文件 file = new File (uploadPath + fileName + suffixName); multipartFile.transferTo( file ); return prefixPath + fileName + suffixName; } } |
上面中的ClassUtils是Spring提供的一個工具類,而調用方法getDefaultClassLoader().getResource("").getPath()
是獲取當前項目classpath下的路徑。
以上便是本系統中關于文件上傳的部分內容,該系統的源碼以上傳GitHub
總結
以上所述是小編給大家介紹的Spring Boot 會員管理系統之處理文件上傳功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持!
原文鏈接:https://www.cnblogs.com/lger/p/8597156.html