這篇博客簡單介紹下spring boot下圖片上傳和下載，已經遇到的問題。首先需要創建一個spring boot項目。
1、核心的controller代碼
|
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
package com.qwrt.station.websocket.controller; import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; /** * Created by jack on 2017/10/30. */@RestController@RequestMapping("v1/uploadDownload") public class UploadDownloadController { private static final Logger logger = LoggerFactory.getLogger(UploadDownloadController.class); @Value("${uploadDir}") private String uploadDir; @RequestMapping(value = "/uploadImage", method = RequestMethod.POST) public JSONObject uploadImage(@RequestParam(value = "file") MultipartFile file) throws RuntimeException { if (file.isEmpty()) { return JsonUtil.getFailJsonObject("文件不能為空"); } // 獲取文件名 String fileName = file.getOriginalFilename(); logger.info("上傳的文件名為：" + fileName); // 獲取文件的后綴名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); logger.info("上傳的后綴名為：" + suffixName); // 文件上傳后的路徑 String filePath = uploadDir; // 解決中文問題，liunx下中文路徑，圖片顯示問題 // fileName = UUID.randomUUID() + suffixName; File dest = new File(filePath + fileName); // 檢測是否存在目錄 if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); logger.info("上傳成功后的文件路徑未：" + filePath + fileName); return JsonUtil.getSuccessJsonObject(fileName); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return JsonUtil.getFailJsonObject("文件上傳失敗"); } //文件下載相關代碼 @RequestMapping(value = "/downloadImage",method = RequestMethod.GET) public String downloadImage(String imageName,HttpServletRequest request, HttpServletResponse response) { //String fileName = "123.JPG"; logger.debug("the imageName is : "+imageName); String fileUrl = uploadDir+imageName; if (fileUrl != null) { //當前是從該工程的WEB-INF//File//下獲取文件(該目錄可以在下面一行代碼配置)然后下載到C:\\users\\downloads即本機的默認下載的目錄 /* String realPath = request.getServletContext().getRealPath( "//WEB-INF//");*/ /*File file = new File(realPath, fileName);*/ File file = new File(fileUrl); if (file.exists()) { response.setContentType("application/force-download");// 設置強制下載不打開 response.addHeader("Content-Disposition", "attachment;fileName=" + imageName);// 設置文件名 byte[] buffer = new byte[1024]; FileInputStream fis = null; BufferedInputStream bis = null; try { fis = new FileInputStream(file); bis = new BufferedInputStream(fis); OutputStream os = response.getOutputStream(); int i = bis.read(buffer); while (i != -1) { os.write(buffer, 0, i); i = bis.read(buffer); } System.out.println("success"); } catch (Exception e) { e.printStackTrace(); } finally { if (bis != null) { try { bis.close(); } catch (IOException e) { e.printStackTrace(); } } if (fis != null) { try { fis.close(); } catch (IOException e) { e.printStackTrace(); } } } } } return null; } } |
上面的代碼有兩個方法，上面的方法是圖片上傳的方法，下面的方法是圖片下載的方法。下載圖片需要傳入圖片的文件名，在ios，android手機，谷歌瀏覽器測試，上傳下載沒有問題。
2、測試的html的核心代碼如下，進行圖片的上傳和下載：
|
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>websocket chat</title> </head> <body> <div> <label>輸入信息：</label><input id="id" width="100px" /><br /> <button id="btn">發送消息</button> <button id="connection">websocket連接</button> <button id="disconnection">斷開websocket連接</button> <br /><br /> <form enctype="multipart/form-data" id="uploadForm"> <input type="file" name="uploadFile" id="upload_file" style="margin-bottom:10px;"> <input type="button" id="uploadPicButton" value="上傳" onclick="uploadImage()"> </form> <!--<input type="file" onchange="uploadImgTest();" id="uploadImg" name="uploadImg" /> <button id="uploadImage" onclick="uploadImage();">上傳</button>--> </div> <div id="test"> </div> <hr color="blanchedalmond"/> <div id="voiceDiv"> </div> <hr color="chartreuse" /> <div id="imgDiv" style="width: 30%;height: 30%;"> <img src="http://192.168.9.123:8860/v1/uploadDownload/downloadImage?imageName=123.JPG" style="width: 160px;height: 160px;"/> </div> </body> <script src="js/jquery-3.2.1.min.js"></script> <!--<script th:src="@{stomp.min.js}"></script>--> <script src="js/sockjs.min.js"></script> <script> var websocketUrl = "ws://192.168.9.123:8860/webSocketServer"; var websocket; if('WebSocket' in window) { //websocket = new WebSocket("ws://" + document.location.host + "/webSocketServer"); //websocket = new WebSocket("ws://192.168.9.123:9092/webSocketServer"); //websocket = new WebSocket("ws://localhost:8860/webSocketServer"); websocket = new WebSocket(websocketUrl); } else if('MozWebSocket' in window) { websocket = new MozWebSocket("ws://" + document.location.host + "/webSocketServer"); } else { websocket = new SockJS("http://" + document.location.host + "/sockjs/webSocketServer"); } websocket.onopen = function(evnt) { console.log("onopen----", evnt.data); }; websocket.onmessage = function(evnt) { //$("#test").html("(<font color='red'>" + evnt.data + "</font>)"); console.log("onmessage----", evnt.data); //$("#test").html(evnt.data); $("#test").append('<div>' + event.data + '</div>'); }; websocket.onerror = function(evnt) { console.log("onerror----", evnt.data); } websocket.onclose = function(evnt) { console.log("onclose----", evnt.data); } $('#btn').on('click', function() { if(websocket.readyState == websocket.OPEN) { var msg = $('#id').val(); //調用后臺handleTextMessage方法 websocket.send(msg); } else { alert("連接失敗!"); } }); $('#disconnection').on('click', function() { if(websocket.readyState == websocket.OPEN) { websocket.close(); //websocket.onclose(); console.log("關閉websocket連接成功"); } }); $('#connection').on('click', function() { if(websocket.readyState == websocket.CLOSED) { websocket.open(); //websocket.onclose(); console.log("打開websocket連接成功"); } }); //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。 window.onbeforeunload = function() { websocket.close(); } function uploadImgTest() { } function uploadImage(){ //var uploadUrl = "http://localhost:8860/v1/uploadDownload/uploadImage"; var uploadUrl = "http://192.168.9.123:8860/v1/uploadDownload/uploadImage"; var downUrl = "http://192.168.9.123:8860/v1/uploadDownload/downloadImage" var pic = $('#upload_file')[0].files[0]; var fd = new FormData(); //fd.append('uploadFile', pic); fd.append('file', pic); $.ajax({ url:uploadUrl, type:"post", // Form數據 data: fd, cache: false, contentType: false, processData: false, success:function(data){ console.log("the data is : {}",data); if(data.code == 0){ console.log("上傳成功后的文件路徑為："+data.data); var img = $("<img />") img.attr("src",downUrl+"?imageName="+data.data); img.width("160px"); img.height("160px"); $("#imgDiv").append(img); } } }); } </script> </html> |
上面的代碼有些和圖片的上傳和下載沒有關系，根據需要自己去掉，看圖片上傳和下載的核心代碼，需要引入jquery。
3、spring boot的屬性配置：
1.解決圖片上傳太大的問題：
|
1
2
3
4
5
|
spring: http: multipart: max-file-size: 100Mb #文件上傳大小 max-request-size: 200Mb #最打請求大小 |
這是新版spring boot解決圖片或者文件上傳太大的問題，老板的不是這樣解決的。可以自己查資料
2.配置文件上傳保存的位置：
|
1
2
|
#上傳位置uploadDir: F:\mystudy\pic\ |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
元宵節福利：
原文鏈接：http://blog.csdn.net/j903829182/article/details/78406778
