Dieser Artikel erfordert ein gewisses Wissen über Vue und Springboot und ist in zwei Projekte unterteilt. Eines ist das Front-End-Vue-Projekt und das andere ist das Back-End-Springboot-Projekt.
Back-End-Projektkonstruktion
Ich verwende Springboot1.5.10+JDK8+IDEE Verwenden Sie die Idee, ein neues Springboot -Projekt zu erstellen und auf Weiter zu klicken
Nachdem das Projekt erfolgreich erstellt wurde, lautet die Maven -POM -Konfiguration wie folgt
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <!--Add web module--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </dependency> </Abhängigkeiten>
Schreiben Sie als nächstes die hochgeladene API -Schnittstelle
@RastController@RequestMapping ("/Upload")@crossoriginPublic Class UploadController {@Value ("$ {Prop.Upload-Folner}") private String upload_Folder; private logger logger = loggerFactory.getLogger (UploadController.class); @PostMapping ("/SingleFile") öffentliches Objekt SingleFileUpload (MultiPartFile -Datei) {logger.debug ("Angehörige Dateiparameter: {}", json.tojonstring (Datei, true)); if (object.isnull (Datei) || file.isempty ()) {logger.Error ("Datei ist leer"); Rückgabe "Datei ist leer, bitte erneut hochladen"; } try {byte [] bytes = file.getBytes (); Path path = paths.get (Upload_Folder + file.getOriginalFileName ()); // Wenn es keinen Dateienordner gibt, erstellen Sie if (! File.iswrible (path)) {files.createdirectories (paths.get (Upload_Folder)); } // Datei in die angegebenen Pfaddateien.Write (Path, Bytes) geschrieben; logger.debug ("Datei erfolgreich geschrieben ..."); Rückgabe "Datei -Uploads erfolgreich"; } catch (ioException e) {e.printstacktrace (); zurück "Backend Exception ..."; }}} Crossorigin-Annotation: Lösen Sie die Probleme mit der Domänen, da die vorderen und hinteren Enden vollständig getrennt sind, und Cross-Domänen-Probleme sind unvermeidlich. Durch das Hinzufügen dieser Annotation kann Controller die Cross-Domäne unterstützen. Wenn diese Annotation entfernt wird, erreicht der Front-End-Ajax-Antrag das Back-End nicht. Dies ist nur eine Cross-Domänen-Lösung, und es gibt andere Lösungen. Dieser Artikel wird ihn vorerst nicht abdecken.
MultipartFile: Das MultipartFile-Objekt von SpringMVC, mit dem die Formdata von Front-End-Anfragen eingegangen ist.
Postmapping ist eine neue Annotation, die nach Frühjahr 4.3 eingeführt wird. Es soll die Zuordnung von HTTP -Methoden vereinfachen, was dem häufig verwendeten @RequestMapping (value = "/xx", method = requestMethod.post) entspricht.
Das Backend wurde bisher abgeschlossen, es ist sehr einfach.
Front-End-Projektkonstruktion
Ich verwende NODE8+WebPack3+VUE2
Lokal müssen Sie die Knotenumgebung installieren und Vue-Cli installieren und mit Vue-CLI ein VUE-Projekt generieren.
Öffnen Sie es nach erfolgreicher Erstellung des Projekts mit Webstorming und Sie können ein einfaches Upload -Beispiel schreiben. Der Hauptcode lautet wie folgt:
<Semplate> <div> <h1> {{msg}} </h1> <form> <Eingabe type = "file" @änderung = "getFile ($ event)"> <button @click = "subieren ($ event)"> enden </button> </form> </div> </template> <Script> <Script> axios von 'axios'; Exportieren Sie Standard {Name: 'HelloWorld', data () {return {msg: 'Willkommen zu deiner vue.js -App', Datei: ''}}, Methoden: {getFile: function (Ereignis) {this.file = event.target.files [0]; console.log (this.file); }, reichen: Funktion (Ereignis) {// Verhindern Elemente aus Standardverhaltensereignis.PreventDefault (); Sei FormData = new FormData (); FormData.Append ("Datei", this.file); axios.post ('http: // localhost: 8082/upload/SingleFile', formData) .then (Funktion (Antwort) {alert (Antwort.Data); console.log (Antwort); Fenster.Location.Reload ();}) .Catch (Funktion (Fehler) {Allert ("adroaded"); window.location.reload (); }}}}} </script>Verwenden Sie Axios, um AJAX -Anfragen an das Backend zu senden, die Bilddaten mithilfe des FormularData -Objekts von H5 abzubauen
prüfen
Starten Sie den Server und führen Sie die Hauptmethode der BootApplication -Klasse direkt aus, Port 8082
Starten Sie das Frontend, der Port standardmäßig 8080 und CD zum Front -End -Verzeichnis und führen Sie sie separat aus:
npm installNpm run dev
Nach erfolgreichem Startup besuchen Sie Localhost: 8080
Wählen Sie ein Bild zum Hochladen aus. Sie können feststellen, dass nach dem Erfolg des Uploads auch Bilddateien im angegebenen Verzeichnis des Backends vorhanden sind
Zusammenfassen
Zu diesem Zeitpunkt ist eine separate Upload -Demo mit den vorderen und hinteren Enden abgeschlossen. Dieser Artikel ist eine einfache Demo, die sich nur mit dem Hochladen kleiner Dateien befassen kann. Später werde ich einen Artikel über Springboot+Vue schreiben, um das Hochladen großer Dateien in Stücken zu erkennen. Bleiben Sie also auf dem Laufenden. Mit dem Quellcode beigefügt, Willkommen bei Star: Boot-Upload.