In diesem Blog wird kurz die Probleme vorgestellt, die Sie beim Hochladen und Herunterladen von Bildern unter Spring Boot aufgetreten sind. Zuerst müssen Sie ein Spring Boot -Projekt erstellen.
1. Der Core Controller -Code
Paket 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; importieren javax.servlet.http.httpServletRequest; importieren javax.servlet.http.httpServletResponse; import Java.io.*; /*** Erstellt von Jack am 2017/10/30. */ @RestController @RequestMapPing ("v1/ UploadDownload") öffentliche Klasse 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 -Datei) löst RunTimeException {if (isempty ()) {return Jsonutil.GetGexception aus. } // den Dateinamen String sateiname = file.getOriginalFileName () abrufen; logger.info ("Der Name der hochgeladenen Datei lautet:" + Dateiname); // den Datei Suffixname = Dateiname.substring (Dateiname.LastIndexof (".")) Abrufen; logger.info ("Der hochgeladene Suffixname lautet:" + SuffixName); // Der Pfad nach Datei Upload String filepath = uploadDir; // chinesische Probleme lösen, chinesischer Pfad unter liunx, Bildanzeigeproblem // Dateiname = uUid.randomuuid () + Suffixname; Datei dest = neue Datei (FilePath + Dateiname); // Erkennen Sie, ob das Verzeichnis existiert, wenn (! Dest.getParentFile (). Exist ()) {dest.getParentFile (). Mkdirs (); } try {file.transferto (dest); logger.info ("Der Dateipfad nach dem Hochladen ist nicht:" + filepath + Dateiname); return jsonUtil.getSuccessjsonObject (Dateiname); } catch (illegalStateException e) {e.printstacktrace (); } catch (ioException e) {e.printstacktrace (); } return jsonUtil.getFailjsonObject ("Datei -Upload fehlgeschlagen"); } // Datei Download verwandter Code @RequestMapping (value = "/downloadImage", method = requestMethod.get) public String downloadImage (String imagname, httpServletRequest -Anforderung, httpServletResponse) {// String FileName = "123.jpg"; logger.debug ("Der Bildname ist:"+imaginame); String fileUrl = uploadDir+imaginame; if (fileUrl! Datei (RealPath, Dateiname);*/ Datei Datei = new Datei (FileURL); if (file.exists ()) {response.setContentType ("application/force-download"); // Setzen Sie den erzwungenen Download, um die Antwort nicht zu öffnen. FileInputStream fis = null; BufferedInputStream Bis = null; try {fis = new FileInputStream (Datei); Bis = neuer BufferedInputStream (FIS); OutputStream os = response.getOutputStream (); int i = Bis.read (Puffer); while (i! = -1) {os.write (buffer, 0, i); i = Bis.read (Puffer); } System.out.println ("Erfolg"); } catch (Ausnahme e) {e.printstacktrace (); } endlich {if (bis! = null) {try {Bis.close (); } catch (ioException e) {e.printstacktrace (); }} if (fis! = null) {try {fis.close (); } catch (ioException e) {e.printstacktrace (); }}}}} return null; }}}}Der obige Code enthält zwei Methoden. Die obige Methode ist die Methode zum Hochladen von Bildern, und die folgende Methode ist die Methode zum Herunterladen von Bildern. Um das Bild herunterzuladen, müssen Sie den Dateinamen des Bildes übergeben. Testen Sie es auf iOS, Android -Telefon, Google Chrome, und es gibt kein Problem mit dem Hochladen und Herunterladen.
2. Der Kerncode des getesteten HTML ist wie folgt, laden Sie Bilder hoch und laden Sie Bilder herunter:
<! DocType html> <html> <Head> <meta charset = "utf-8"/> <title> WebSocket-Chat </title> </head> <body> <div> <label> Eingabeinformationen: </label> <Eingabe id = "ID"/> <br/> <Button ID = "BTN"> Senden Sie eine Nachricht. ID = "Disconnection"> Abnahme < /button> <br /> <br /> <Formular EnctType = "MultiPart /Form-Data" id = "UploadForm"> <Eingabe type = "Datei" name = "UploadFile" id = "upload_file" style "style" style = "margin-bottom: 10px; onclick = "uploadImage ()"> </form> <!-<Eingabe type = "Datei" onchange = "uploadImgtest ();" id="uploadImg" name="uploadImg" /> <button id="uploadImage" onclick="uploadImage();">Upload</button>--> </div> <div id="test"> </div> <hr color="blanchedalmond"/> <div id="voiceDiv"> </div> <hr color="chartreuse" /> <div id="imgDiv"> <img src="http://192.168.9.123:8860/v1/uploadDownload/downloadImage?imageName=123.JPG"/> </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 webocketurl = "ws: //192.168.9.123: 8860/webSocketServer"; var webocket; if ('WebSocket' im Fenster) {// webocket = new WebSocket ("ws: //" + document.location.host + "/webocketserver"); // webocket = new WebSocket ("WS: //192.168.9.123: 9092/WebSocketServer"); // webocket = new WebSocket ("ws: // localhost: 8860/webocketserver"); WebSocket = New WebSocket (WebSocketurl); } else if ('MoZwebsocket' im Fenster) {WebSocket = new Mozwebsocket ("ws: //" + document.location.host + "/webocketserver"); } else {WebSocket = new SocKJS ("http: //" + document.location.host + "/sockjs/webocketserver"); } webocket.onopen = function (evnt) {console.log ("onopen ----", evnt.data); }; webocket.onmessage = function (evnt) {//$("#test").html("(<Font color = 'rot'> " + 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); } webocket.onclose = function (evnt) {console.log ("onclose ----", evnt.data); } $ ('#btn'). on ('click', function () {if (WebSocket.ReadyState == WebSocket.open) {var msg = $ ('#id'). Val (); // Berechnung des Hintergrunds HandletExtMessage -Methode Websocket.send (msg);} {{Alert ("Connectioned!"); $ ('#disconnection'). on ('click', function () {if (WebSocket.ReadyState == WebSocket.open) {WebSocket.CLOSE (); //websocket.onclose (); console.log ("Die WebSocket -Verbindung erfolgreich schließen"); $ ('#connection'). on ('click', function () {if (WebSocket.ReadyState == WebSocket.cLosed) {WebSocket.Open (); //websocket.onclose (); console.log ("Die WebSocket -Verbindung erfolgreich öffnen";}}); // Hören Sie sich das Fensterschließereignis an. Wenn das Fenster geschlossen ist, schließen Sie aktiv die WebSocket -Verbindung, um zu verhindern, dass das Fenster schließt, bevor die Verbindung getrennt wird, und die Serverseite wird Ausnahmen auswirken. window.onbeforeUload = function () {WebSocket.close (); } function uploadImgTest () {} Funktion uploadImage () {// var uploadurl = "http: // localhost: 8860/v1/uploaddownload/uploadImage"; var uploadurl = "http://192.168.9.123:8860/v1/uploaddownload/uploadimage"; var downloadurl = "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 ('Datei', pic); $ .ajax ({url: uploadurl, type: "post", // Formatdaten: fd, cache: false, contentType: false, processData: false, Erfolg: Funktion (Daten) {console.log ("Die Daten ist: {}", Daten); = $ ("<img />") img.attr ("src", Downurl+"? } </script> </html>Einige der oben genannten Codes haben nichts mit dem Hochladen und Herunterladen von Bildern zu tun. Entfernen Sie sie nach Bedarf selbst und sehen Sie sich den Kerncode zum Hochladen und Herunterladen von Bildern an. Sie müssen JQuery vorstellen.
3. Konfiguration der Spring Boot -Eigenschaft:
1. Lösen Sie das Problem des zu großen Hochladens:
Frühling: HTTP: Multipart: Max-File-Größe: 100MB #Datei Upload-Größe Max-Request-Größe: 200 MB #maximum Anforderungsgröße
Dies ist die neue Version von Spring Boot, um das Problem des zu großen Uploads von Bildern oder Dateien zu lösen. So löste der Chef es nicht. Sie können die Informationen selbst überprüfen
2. Der Ort, an dem die Konfigurationsdatei hochgeladen und gespeichert wird:
#Uploaddir: f:/mystudy/pic/
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.
Wohlbefinden des Laternfestivals: