Este artículo requiere una cierta cantidad de conocimiento sobre Vue y Springboot, y se divide en dos proyectos, uno es el proyecto Vue front-end y el otro es el proyecto Back-end springboot.
Construcción del proyecto de fondo
Estoy usando SpringBoot1.5.10+JDK8+Idea Use la idea para crear un nuevo proyecto SpringBoot y haga clic en Siguiente
Después de que el proyecto se crea con éxito, la configuración de Maven POM es la siguiente
<pendencies> <Spendency> <MoupRiD> org.springframework.boot </groupid> <artifactid> spring-boot-starter </arfactid> </pendency> <!-Agregar módulo web-> <pendency> <proupid> org.springFrame.Boot </groupId> <AtifactiD> spring-Boot-sharterweb </artid-wheb </artid> <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> </dependencies>
A continuación, escriba la interfaz API cargada
@RestController@requestMapping ("/upload")@CrossorigInPublic Class uploadController {@Value ("$ {prop.upload-flolder}") private string upload_folder; privado logger logger = loggerFactory.getLogger (uploadController.class); @PostMapping ("/singlefile") Objeto público SingleFileUpload (archivo multipartfile) {logger.debug ("parámetros del archivo entrante: {}", json.tojsonstring (archivo, true)); if (objects.isnull (file) || file.isEmpty ()) {logger.error ("archivo está vacío"); return "El archivo está vacío, por favor cargue nuevamente"; } try {byte [] bytes = file.getBytes (); Ruta ruta = ratts.get (upload_folder + file.getOriginalFileName ()); // Si no hay carpeta de archivos, cree if (! Files.iswritable (path)) {files.createDirectororios (paths.get (upload_folder)); } // El archivo escribe en la ruta especificada. logger.debug ("El archivo escribe con éxito ..."); devolver "las cargas de archivo correctamente"; } catch (ioException e) {E.PrintStackTrace (); devolver "Excepción de backend ..."; }}} Anotación de Crossorigin: resuelva los problemas de dominio cruzado, porque los extremos delanteros y traseros están completamente separados, los problemas de dominio cruzado son inevitables. Agregar esta anotación permitirá al controlador admitir el dominio cruzado. Si se elimina esta anotación, la solicitud AJAX front-end no alcanzará el back-end. Esta es solo una solución de dominio cruzado, y hay otras soluciones. Este artículo no lo cubrirá por ahora.
MultipartFile: el objeto multipartfile de SpringMVC, utilizado para recibir los FormData aprobados por las solicitudes de front-end.
Postmapping es una nueva anotación introducida después de la primavera 4.3. Es para simplificar la asignación de los métodos HTTP, que es equivalente a @RequestMapping (valor = "/xx", método = requestmethod.post).
El backend se ha completado hasta ahora, es muy simple.
Construcción del proyecto front-end
Estoy usando Node8+WebPack3+Vue2
A nivel local, debe instalar el entorno de nodo e instalar Vue-Cli, y usar Vue-Cli para generar un proyecto VUE.
Una vez que el proyecto se cree con éxito, ábralo con WebStorm y puede escribir un ejemplo de carga simple. El código principal es el siguiente:
<template> <div> <h1> {{msg}} </h1> <form> <input type = "file" @change = "getFile ($ event)"> <button @click = "enviar ($ event)"> enviar </botón> </form> </div> </tempate> <script> importar axios de 'axios'; Exportar predeterminado {name: 'helloworld', data () {return {msg: 'bienvenido a su aplicación vue.js', archivo: ''}}, métodos: {getFile: function (event) {this.file = event.target.files [0]; console.log (this.file); }, enviar: function (event) {// prevenir elementos del comportamiento predeterminado event.preventDefault (); Let FormData = new FormData (); formdata.append ("archivo", this.file); axios.post ('http: // localhost: 8082/upload/singlefile', formData) .then (function (respuesta) {alerta (respuesta.data); console.log (respuesta); window.location.reload ();}) .catch (function (error) {alerta ("falló"); console.log (error); window.location); }); }}}}} </script>Use Axios para enviar solicitudes AJAX al backend, encapsule los datos de la imagen utilizando el objeto FormData de H5
prueba
Inicie el servidor y ejecute el método principal de la clase BootApplication directamente, puerto 8082
Comience el front -end, el puerto predeterminado a 8080 y CD al directorio frontal, y ejecutarlos por separado:
npm installnpm ejecutar dev
Después de una startup exitosa, visite localhost: 8080
Seleccione una imagen para cargar, puede ver que después de que la carga sea exitosa, también hay archivos de imagen en el directorio especificado del backend
Resumir
En este punto, se completa una demostración de carga separada con los extremos delanteros y traseros. Este artículo es una demostración simple, que solo puede lidiar con la carga de archivos pequeños. Más tarde, escribiré un artículo en SpringBoot+Vue para realizar la carga de archivos grandes en trozos, así que estad atentos. Adjunto con el código fuente, bienvenido a Star: Boot-Spload.