Cet article nécessite une certaine connaissance de Vue et Springboot, et est divisé en deux projets, l'un est le projet Vue frontal et l'autre est le projet Springboot back-end.
Construction du projet back-end
J'utilise Springboot1.5.10 + JDK8 + Idea Utilisez l'idée pour créer un nouveau projet Springboot et cliquez sur Suivant
Une fois le projet créé avec succès, la configuration de Maven Pom est la suivante
<Dependances> <Dependency> <GroupId> org.springframework.boot </proupId> <ArtifActid> printemps-boot-starter </ artifactid> </pependency> <! - Ajouter un module Web -> <dependency> <proupId> org.springframework.boot </prounid> <artifactid> spring-boot-starter-starter-web </prefact> <dependency> <proupId> org.springframework.boot </proupId> <Artifactid> Spring-boot-starter-test </retifactid> <ccope> test </ccope> </dependency> <dependency> <proupId> com.alibaba </proped> <e-artifiCtid> FASTJSON </ artifactid> <version>
Ensuite, écrivez l'interface API téléchargée
@ RestController @ requestmapping ("/ upload") @ crossoriginpublic class uploadController {@value ("$ {prop.upload-folder}") private string upload_folder; Logger privé = loggerfactory.getLogger (uploadController.class); @PostMapping ("/ singleFile") Objet public SingleFileUpload (Fichier multipartFile) {logger.debug ("Paramètres de fichier entrants: {}", json.tojSontring (fichier, true)); if (objets.isnull (file) || file.isempty ()) {logger.error ("file est vide"); return "Le fichier est vide, veuillez télécharger à nouveau"; } essayez {byte [] bytes = file.getBytes (); Path path = paths.get (upload_folder + file.getoriginalFileName ()); // S'il n'y a pas de dossier de fichiers, créez si (! Files.iswitable (path)) {files.CreateDirectories (paths.get (upload_folder)); } // Fichier écrit sur les fichiers path spécifiés.Write (chemin, octets); Logger.debug ("Le fichier écrit avec succès ..."); Renvoie "les téléchargements de fichiers avec succès"; } catch (ioException e) {e.printStackTrace (); Renvoie "Backend Exception ..."; }}} ANNOTATION DE CROSSORIGINE: Résoudre les problèmes de domaine transversal, car les extrémités avant et arrière sont complètement séparées, les problèmes de domaine transversal sont inévitables. L'ajout de cette annotation permettra au contrôleur de prendre en charge le domaine croisé. Si cette annotation est supprimée, la demande AJAX frontale n'atteindra pas le back-end. Il s'agit juste d'une solution de domaine croisé et il existe d'autres solutions. Cet article ne le couvrira pas pour l'instant.
MultipartFile: objet multipartfile de Springmvc, utilisé pour recevoir le formdata transmis par les demandes frontales.
Le postmappage est une nouvelle annotation introduite après le printemps 4.3. Il s'agit de simplifier le mappage des méthodes HTTP, ce qui équivaut à la @RequestMapping couramment utilisée (valeur = "/ xx", méthode = requestMethod.post).
Le backend a été achevé jusqu'à présent, il est très simple.
Construction du projet frontal
J'utilise node8 + webpack3 + vue2
Localement, vous devez installer l'environnement de nœud et installer Vue-Cli, et utiliser Vue-CLI pour générer un projet VUE.
Une fois le projet créé avec succès, ouvrez-le avec WebStorm et vous pouvez écrire un exemple de téléchargement simple. Le code principal est le suivant:
<mpelate> <div> <h1> {{msg}} </h1> <form> <input type = "file" @ change = "getFile ($ event)"> <bouton @ click = "soumider ($ event)"> soumettre </ bouton> </ form> </div> </ Template> </ Script> Importer Axios à partir de 'axios'; Export Default {name: 'Helloworld', data () {return {msg: 'bienvenue sur votre application Vue.js', fichier: ''}}, méthodes: {getFile: function (event) {this.file = event.target.files [0]; console.log (this.file); }, soumettre: fonction (événement) {// empêcher les éléments de l'événement de comportement par défaut.PreventDefault (); Selt FormData = new FormData (); formdata.append ("fichier", this.file); axios.post ('http: // localhost: 8082 / upload / singlefile', formdata) .then (function (réponse) {alert (réponse.data); console.log (réponse); window.location.reload ();}) .catch (function (error) {alert ("upload faillit"); Console.Log (error); window.location.reload ();}); }}}}} </ script>Utilisez Axios pour envoyer des demandes AJAX au backend, encapsuler les données d'image à l'aide de l'objet FormData de H5
test
Démarrez le serveur et exécutez directement la méthode principale de la classe BootApplication, port 8082
Démarrez le frontal, le port par défaut est en 8080 et CD dans le répertoire frontal, et les exécuter séparément:
NPM InstallNPM Run Dev
Après une startup réussie, visitez LocalHost: 8080
Sélectionnez une image à télécharger, vous pouvez voir qu'après le succès du téléchargement, il existe également des fichiers d'image dans le répertoire spécifié du backend
Résumer
À ce stade, une démo de téléchargement séparée avec les extrémités avant et arrière est terminée. Cet article est une simple démo, qui ne peut gérer que le téléchargement de petits fichiers. Plus tard, j'écrirai un article sur Springboot + Vue pour réaliser le téléchargement de fichiers volumineux en morceaux, alors restez à l'écoute. Jugé avec le code source, bienvenue pour star: boot-upload.