이 기사는 VUE 및 SpringBoot에 대한 일정량의 지식이 필요하며 두 프로젝트로 나뉩니다. 하나는 프론트 엔드 vue 프로젝트이고 다른 하나는 백엔드 스프링 부츠 프로젝트입니다.
백엔드 프로젝트 구성
나는 SpringBoot1.5.10+JDK8+아이디어 사용 아이디어를 사용하고 새로운 SpringBoot 프로젝트를 만들고 다음을 클릭합니다.
프로젝트가 성공적으로 생성 된 후 Maven POM 구성은 다음과 같습니다.
<pectionies> <pectinement> <groupId> org.springframework.boot </groupid> <artifactid> spring-boot-starter </artifactid> </dependency> <!-웹 모듈 추가-> <pelection> <groupid> org.springframework.boot </grouptid> spring-webb </artifactid> org. <pectionency> <groupId> org.springframework.boot </groupid> <artifactid> 스프링-부트 스타터-테스트 </artifactid> <scope> test </scope> </spectency> <grupicid> com.alibaba </groupid> <artifactid> fastjson </artifactid> <버전> 1.39 </version> 1.39. </의존성>
다음으로 업로드 된 API 인터페이스를 작성하십시오
@restController@restontMapping ( "/upload")@crossoriginPublic 클래스 업로드 콘트롤러 {@Value ( "$ {prop.upload-folder}") private String upload_folder; 개인 로거 로거 = loggerfactory.getLogger (uploadController.class); @postmapping ( "/singlefile") public 객체 SingleFileUpload (multipartFile 파일) {logger.debug ( "수신 파일 매개 변수 : {}", json.tojsonstring (file, true)); if (objects.isnull (file) || file.isempty ()) {logger.error ( "파일이 비어 있습니다"); 반환 "파일이 비어 있습니다. 다시 업로드하십시오"; } try {byte [] bytes = file.getBytes (); Path Path = Paths.get (upload_folder + file.getoriginalFilename ()); // 파일 폴더가없는 경우 if (! files.iswritable (path)) {files.createdirectories (paths.get (upload_folder))를 작성하십시오. } // 파일은 지정된 경로 파일에 씁니다 .write (path, bytes); logger.debug ( "파일은 성공적으로 씁니다 ..."); "파일 업로드를 성공적으로 반환"; } catch (ioexception e) {e.printstacktrace (); "백엔드 예외 ..."를 반환합니다. }}} Crossorigin 주석 : 전면과 후면이 완전히 분리되어 있기 때문에 크로스 도메인 문제를 해결하고, 교차 도메인 문제는 불가피합니다. 이 주석을 추가하면 컨트롤러가 크로스 도메인을 지원할 수 있습니다. 이 주석이 제거되면 프론트 엔드 AJAX 요청이 백엔드에 도달하지 않습니다. 이것은 단지 크로스 도메인 솔루션이며 다른 솔루션이 있습니다. 이 기사는 지금이 기사를 다루지 않을 것입니다.
MultipartFile : 프론트 엔드 요청에 의해 전달 된 FormData를받는 데 사용되는 SpringMVC의 MultipartFile 객체.
포스트 맵핑은 봄 4.3 이후에 도입 된 새로운 주석입니다. 일반적으로 사용되는 @requestmapping (value = "/xx", method = requestmethod.post)에 해당하는 HTTP 방법의 매핑을 단순화하는 것입니다.
백엔드는 지금까지 완료되었으며 매우 간단합니다.
프론트 엔드 프로젝트 구성
Node8+WebPack3+vue2를 사용하고 있습니다
로컬에서는 노드 환경을 설치하고 vue-cli를 설치하고 vue-cli를 사용하여 vue 프로젝트를 생성해야합니다.
프로젝트가 성공적으로 생성 된 후 WebStorm으로 열면 간단한 업로드 예제를 작성할 수 있습니다. 기본 코드는 다음과 같습니다.
<emplate> <div> <h1> {{msg}} </h1> <come> <input type = "file" @change = "getfile ($ event)"> <button @click = "click ($ event)"> 제출 </divplate> <cript> 'axios'에서 axios import axios; 내보내기 기본값 {이름 : 'helloworld', data () {return {msg : 'vue.js 앱에 오신 것을 환영합니다 :' '}}, 메소드 : {getfile : function (istent) {this.file = event.files [0]; Console.log (this.file); }, 제출 : function (event) {// 기본적으로 요소를 방지하면 everent.preventDefault (); wormData = new FormData (); formdata.append ( "파일", this.file); axios.post ( 'http : // localhost : 8082/upload/singlefile', formdata) .then (function (response) {alert (response.data); console.log (response); window.location.reload ()) .catch (error (error) {alert ( "upload lavening"); lod.); }}}}}} </script>Axios를 사용하여 Ajax 요청을 백엔드로 보내고 H5의 FormData 객체를 사용하여 이미지 데이터를 캡슐화하십시오.
시험
서버를 시작하고 BootApplication 클래스의 기본 메소드를 직접 실행합니다, 포트 8082
프론트 엔드, 포트 기본값은 8080으로, CD를 프론트 엔드 디렉토리로 시작하고 별도로 실행합니다.
npm installnpm run dev
성공적인 시작 후 LocalHost : 8080을 방문하십시오
업로드 할 이미지를 선택하십시오. 업로드가 성공한 후에는 백엔드의 지정된 디렉토리에 이미지 파일도 있음을 알 수 있습니다.
요약
이 시점에서 전면 및 후면이있는 별도의 업로드 데모가 완료됩니다. 이 기사는 간단한 데모로 작은 파일의 업로드 만 처리 할 수 있습니다. 나중에 SpringBoot+Vue에 기사를 작성하여 대형 파일을 청크로 업로드하는 것을 실현하므로 계속 지켜봐 주시기 바랍니다. 소스 코드와 함께 첨부 된 Star : Boot-Upload에 오신 것을 환영합니다.