Este artigo requer uma certa quantidade de conhecimento sobre Vue e Springboot e é dividida em dois projetos, um é o projeto Vue front-end e o outro é o projeto de troca de back-end.
Construção do projeto de back-end
Estou usando o SpringBoot1.5.10+jdk8+Idea Use a ideia para criar um novo projeto de troca e clique em Avançar
Depois que o projeto é criado com sucesso, a configuração do Maven POM é a seguinte
<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> <Depencency> <PuerpId> org.springframework.boot </groupid> <TRATIFACTID> Spring-boot-starter-test </artifactId> <cope> teste </scope> </dependency> </spendency> </groupiD> com.alibaba </groupid> <TifactId> </siSSERSSENCIDENTE> </SUSTIF> com.alibaba </groupid> <TifactId> </artiftid>
Em seguida, escreva a interface da API enviada
@RestController@requestmapping ("/upload")@CrossoriginPublic Classe uploadController {@Value ("$ {Prop.UPLOAD Folder}") Private String upload_folder; Logger privado Logger = LoggerFactory.getLogger (UPLOPLONTROLLER.CLASS); @PostMapping ("/singlefile") public Object singlefileUpload (arquivo multipart -arquivo) {Logger.debug ("Parâmetros de arquivo recebidos: {}", json.tojSonstring (arquivo, true)); if (objects.isnull (file) || file.isempty ()) {Logger.error ("File está vazio"); retornar "o arquivo está vazio, envie novamente"; } tente {byte [] bytes = file.getBytes (); Caminho caminho = paths.get (upload_folder + file.getoriginalfilename ()); // Se não houver pasta de arquivos, crie if (! Files.iswritable (path)) {files.createDirectories (paths.get (upload_folder)); } // gravações de arquivo nos arquivos de caminho especificado.write (path, bytes); Logger.debug ("Arquivo grava com sucesso ..."); retornar "Uploads de arquivo com sucesso"; } catch (ioexception e) {e.printStackTrace (); retornar "Exceção de back -end ..."; }}} Anotação de crossorigina: resolva problemas de domínio cruzado, porque as extremidades dianteiras e traseiras são completamente separadas, os problemas de domínio cruzado são inevitáveis. A adição desta anotação permitirá que o controlador suportasse o domínio cruzado. Se esta anotação for removida, a solicitação de Ajax front-end não chegará ao back-end. Esta é apenas uma solução de domínio cruzado e há outras soluções. Este artigo não o cobrirá por enquanto.
MultipartFile: Objeto multipart-arquivo da Springmvc, usado para receber os dados do formData transmitidos por solicitações de front-end.
Post -Mapping é uma nova anotação introduzida após a primavera 4.3. É para simplificar o mapeamento dos métodos HTTP, que é equivalente ao @RequestMapping comumente usado (value = "/xx", método = requestmethod.post).
O back -end foi concluído até agora, é muito simples.
Construção do projeto front-end
Estou usando o node8+webpack3+vue2
Localmente, você precisa instalar o ambiente do nó e instalar o vue-cli e usar o vue-cli para gerar um projeto VUE.
Depois que o projeto for criado com sucesso, abra -o com o WebStorm e você pode escrever um exemplo simples de upload. O código principal é o seguinte:
<Modemplate> <div> <h1> {{msg}} </h1> <form> <input type = "file" @alteração = "getfile ($ event)"> <botão @click = "submit ($ event)"> submeter </button> </morm> </div> </somleplate> <cript> importe axios do 'Axios'; exportar padrão {name: 'helloworld', data () {return {msg: 'Bem -vindo ao seu aplicativo vue.js', arquivo: ''}}, métodos: {getFile: function (event) {this.file = event.target.files [0]; console.log (this.File); }, envie: function (event) {// impede os elementos do evento de comportamento padrão.preventDefault (); Seja formData = new FormData (); formData.append ("arquivo", this.File); axios.post ('http: // localhost: 8082/upload/singlefile', formData) .then (function (resposta) {alert (resposta.data); console.log (resposta); window.location.Reload (); window.Location.Reload (); }}}}} </script>Use axios para enviar solicitações de Ajax para o back -end, encapsular dados da imagem usando o objeto FormData do H5
teste
Inicie o servidor e execute o método principal da classe BootApplication diretamente, porta 8082
Inicie a extremidade frontal, a porta padrão é 8080 e CD no diretório front -end e execute -os separadamente:
npm installnpm run dev
Após a startup de sucesso, visite localhost: 8080
Selecione uma imagem para fazer upload, você pode ver que, depois que o upload for bem -sucedido, também existem arquivos de imagem no diretório especificado do back -end
Resumir
Neste ponto, uma demonstração de upload separada com as extremidades dianteiras e traseiras é concluída. Este artigo é uma demonstração simples, que só pode lidar com o upload de arquivos pequenos. Mais tarde, escreverei um artigo sobre Springboot+Vue para realizar o upload de arquivos grandes em pedaços, então fique atento. Anexado com o código-fonte, bem-vindo ao Star: Boot-Upload.