Agular2 + maszynopis + przesyłanie plików

Question

Tworzę projekt angular2, w którym moim wymaganiem jest przesłanie pliku i wysłanie parametrów od klienta do serwera (Spring Rest Server). Próbowałem interfejsu Formdata, ale kiedy dołączam do niego plik (obiekt pliku utworzony z event.srcElement.files), a następnie loguję obiekt do konsoli, wypisuje on pusty obiekt formularza. Jeśli chodzi o stronę serwera, używam @requestparam ("file") do pobrania pliku. Byłoby wspaniale, gdyby ktoś mógł udzielić pomocy w tej sprawie.

jest to kod w moim pliku html

<input type="file" #uploadFile multiple="true" (change)="uploadFile($event)"/> 

plik składnikiem jest jak ten

uploadFile(event:any){ 
    let file = event.target.files[0]; 
    let fileName = file.name; 
    console.log(file) 
    console.log(fileName) 
    let formData = new FormData(); 
    formData.append('file',file); 
    this.examService.uploadAnswer(formData); 
} 

w pliku usług

uploadAnswer(formData:FormData){ 
      console.log(formData) 
      this.http.post(this.url+'/uploadanswer', formData) 
      .map((response: Response) => { 
       let res = response.json(); 
      Object.keys(res).forEach(name => 
       this.questions=res[name] 
      ); 
      }); 

Answer 1

Twój HTML powinny być:

<input id="file-field" name="file-field" (change)="uploadFile($event)" type="file" accept=".png,.jpg,.jpeg"> 

Więc dostaniesz plik w składniku jak:

uploadFile(event) { 
    let files = event.target.files; 
    if (files.length > 0) { 
    console.log(file); // You will see the file 
    this.service.uploadFile(file); 
    } 
} 

i służbie:

uploadFile(file) { 
    let formData: FormData = new FormData(); 
    formData.append('file', file, file.name); 

    this.http.post(url, formData, request_options) 
} 

Następnie otrzymasz w pliku z kluczem w pliku danych żądania.