Agular2 + typescript + tải lên tập tin

Question

Tôi đang tạo một dự án angular2, trong đó yêu cầu của tôi là tải lên một tệp và gửi một số tham số từ máy khách đến máy chủ (Spring Rest Server). Tôi đã thử Giao diện Formdata, nhưng khi tôi đang thêm một tệp (File Object được tạo từ event.srcElement.files) vào nó và sau đó ghi lại đối tượng vào giao diện điều khiển, nó in một đối tượng formdata rỗng. Đối với phía máy chủ tôi đang sử dụng @requestparam ("tệp") để tìm nạp tệp. Sẽ thật tuyệt nếu có ai có thể giúp đỡ về điều này.

đây là đoạn code trong file html của tôi

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

tập tin thành phần là như thế này

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); 
} 

và trong hồ sơ vụ

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

HTML của bạn nên là:

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

Vì vậy, bạn sẽ nhận được tập tin trong thành phần như:

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

Và trong dịch vụ:

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

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

Sau đó, bạn sẽ nhận được tập tin với tập tin quan trọng trong dữ liệu theo yêu cầu.