Observable에서 xhr.send()를 사용한 서버 응답 받기

Question

Angular 2 앱에서 파일을 POST하는 메소드를 구현했습니다. 그것은 내가 찾은 해결책을 기반으로합니다 here.

각도 2는 파일 업로드 자체를 지원하지 않으므로 해결 방법은 xhr을 사용해야합니다. 이 작업 솔루션 모습입니다 같은 :

구성 요소 방법 :

onSubmit(): void { 
    this.inputModuleService.postFile(this.files).subscribe(() => { 
     console.log('sent'); 
    }); 
} 

서비스 방법 :

postFile (files: File[]): Observable<string> { 
    var url = this.uploadURL; 

    return Observable.create(observer => { 
     var formData: FormData = new FormData() 
     var xhr: XMLHttpRequest = new XMLHttpRequest(); 

     formData.append("upload", files[i], files[i].name); 

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

     xhr.open('POST', url, true); 
     xhr.send(formData); 
    }); 
} 

내 문제는 내가 응답을 다시 얻는 방법을 이해하지 못하는 것입니다 xhr.send()을 호출 한 후 onSubmit() 메서드에 전달합니다. Angular2와 관측 가능과 약속의 개념은 모두 새로운 것입니다.

이 관찰 가능 서버에서 서버의 응답을 얻으려면 어떻게해야합니까?

Answer 1

서버 응답은 subscribe()의 성공 및 오류 콜백에 제공됩니다

onSubmit(): void { 
    this.inputModuleService.postFile(this.files).subscribe(
     response => { 
      //response is the server's response, parsed into a javascript object 
      console.log('server responded: ', response); 
     }, 
     error => { 
      //server response emitted when xhr.status !== 200 
      console.error(error); 
     } 
    ); 
} 

이 줄 : i이 정의되어 있기 때문에

formData.append("upload", files[i], files[i].name); 

오류가 발생됩니다. 에서 복사 한 코드는 루프 내에서 해당 라인을 가지고 있고 i은 현재 색인입니다. 그것은 당신의 코드에 해당하지 않습니다.

함수 선언 :

postFile (files: File[]): Observable<string> 

이

postFile (files: File[]): Observable<any> 

로 변경되어야한다 postFile에 의해 반환 관찰하기 때문에 객체가 아닌 문자열을 방출한다. 나는 임시 변경 한 후 그했다,

formData.append("upload", file, file.name);