Angular2는 XMLHttpRequest를

Question

내가 XMLHttpRequest의를 사용하여 사진을 업로드 할 때 페이지가 갱신되는이 문제에 봉착과 게시물을하고 페이지를 새로 고침한다 (그리고 서비스가 성공적인이다)

이것은 내 기능입니다 이미지를 게시하는 것은 :

upload(url : string, file : File) : Observable<any> { 
     return Observable.create(observer => { 
    let formData: FormData = new FormData(), 
    xhr: XMLHttpRequest = new XMLHttpRequest(); 

    formData.append("file", file); 

    xhr.onreadystatechange =() => { 
    if (xhr.readyState === 4) { 
     if (xhr.status === 200) { 
     observer.next(JSON.parse(xhr.response)); 
     observer.complete(); 
     } else { 
     observer.error(xhr.response); 
     } 
    } 
    }; 

    xhr.upload.onprogress = (event) => { 
    this.progress = Math.round(event.loaded/event.total * 100); 

    this.progressObserver.next(this.progress); 
    }; 

    xhr.open('POST', this.serverService.getURL() + url, true); 
    xhr.setRequestHeader("Authorization", 'Bearer ' + this.sessionService.getToken()); 
    xhr.send(formData); 
}); 
} 

이 내 HTML입니다 :

<div class="panel"> 
    <div class="panel-body"> 
     <h4 class="page-header mt0">Select files</h4> 
     <div *ngIf="progress == 0" ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (onFileDrop)="onFileDrop($event)" (filDrop)="fileDropBase($event)" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="box-placeholder my-drop-zone"> 
      <label for="file2" class="file-upload"> 
       <button type="button" class="btn btn-default btn-block file-button">Single</button> 
       <input id="file2" type="file" ng2FileSelect [uploader]="uploader" (change)="fileSelected()"/> 
       </label> 
     </div> 
     <progressbar *ngIf="progress > 0" class="progress-striped active file-upload" value="{{progress}}" type="danger"><i>{{progress}}%</i></progressbar> 
    </div> 
</div> 

그리고 이것은 내 구성 요소입니다

export class ImageUploaderComponent implements OnInit { 
    progress : number = 0; 

    @Input() 
    url: string; 

    @Output() 
    fileUploaded= new EventEmitter(); 

public uploader: FileUploader = new FileUploader({ url: this.url }); 
public hasBaseDropZoneOver: boolean = false; 

public fileOverBase(e: any): void { 
    this.hasBaseDropZoneOver = e; 
} 

public onFileDrop(file: any): void { 
    if(file.length > 0) 
     this.imageUploaderService.upload(this.url, file[0]).subscribe((response) => { 
     this.fileUploaded.emit({ code : response.data.code, logo : response.data.logo }); 
    }); 
} 

public fileSelected(): void { 
    if(this.uploader.queue.length > 0) 
     this.imageUploaderService.upload(this.url, this.uploader.queue[0]._file).subscribe(() => { 
     console.log('sent'); 
    }); 
} 

    constructor(private imageUploaderService : ImageUploaderService) { 
    this.imageUploaderService.progress$.subscribe(
     data => { 
      console.log('progress = '+data); 
      this.progress = data; 
     }); 
    } 
    ngOnInit() { 
    } 
} 

내가 빠진 것이 있습니까? 이 문제에 관한 게시물의 주제는 버튼에 Type = 버튼이있는 것에 대한 이야기이지만 그 말이 맞습니다.

편집 : 내가 깨달은 것은 webpack이 제출 후 앱을 다시 작성한다는 것입니다. 따라서 코드 변경이나 webpack이 앱을 다시 빌드해야한다고 생각하게 만들 수 있는지 알 수 없습니다. 희망이 도움이, 나는이 문제와 함께 길을 잃었 어.

EDIT2 : 백엔드 정보 : 자바 컨트롤러

@Controller 
@CrossOrigin(origins = {"http://localhost:4200", "http://clouderp.com:3000"}) 
@RequestMapping("/user") 
public class UserController { 
@RequestMapping(value = "/save", method = RequestMethod.POST, consumes = "multipart/form-data") 
public @ResponseBody 
Response save(@RequestParam("file") MultipartFile file, 
     MultipartHttpServletRequest request) { 
    Response response = new Response(); 
    try { 
     response = userService.profileImage(file, JWTTokenAuthFilter.getUsername(request)); 
    } catch (Exception e) { 
     e.printStackTrace(); 
     response.setCode(CodeList.EXCEPTION); 
     response.setSuccess(false); 
    } 
    return response; 
} 

}

난 아직도 며칠 동안 여기에 차단하고 있습니다 ... 어떤 생각?

Answer 1

비슷한 상황이 있습니다. 업로드 한 위치가 Angular2 프로젝트 안에 있는지 확인하십시오. webpack-dev-server는 변경된 파일을 감지하고 다시 컴파일합니다. 페이지 새로 고침이 발생합니다. 하나의 컴퓨터에서 Frontend와 Backend를 모두 개발했습니다. 파일을 업로드하여 Angular2 자산 경로에 저장했습니다. 그러면 페이지가 자동으로 새로 고침됩니다. 귀하의 사례가 저와 동일하다고 생각하지 않지만 동일한 상황으로 다른 사람들을 도울 수 있기를 바랍니다.