角度2の同期ファイルアップロード

Question

私はファイルを角度2のアプリケーションを使用してバイト配列として取り込むWeb APIにファイルをアップロードしようとしています。

角度2のページからWeb APIにバイト配列を渡すことができません。 File Readerの読み込みメソッドが非同期であるようです。これを同期呼び出しとするか、次のコード行を実行する前にファイルコンテンツがロードされるのを待ちますか？以下は

どれヒントが有用であろう私のコード

//attachment on browse - when the browse button is clicked 
//It only assign the file to a local variable (attachment) 
fileChange = (event) => { 
    var files = event.target.files; 
    if (files.length > 0) { 
     this.attachment = files[0]; 
    } 
} 

//when the submit button is clicked 
onSubmit =() => { 


     //Read the content of the file and store it in local variable (fileData) 
     let fr = new FileReader(); 
     let data = new Blob([this.attachment]); 
     fr.readAsArrayBuffer(data); 
     fr.onloadend =() => { 
      this.fileData = fr.result; //Note : This always "undefined" 
     }; 


     //build the attachment object which will be sent to Web API 
     let attachment: Attachment = { 
      AttachmentId: '0', 
      FileName: this.form.controls["attachmentName"].value, 
      FileData: this.fileData 
     } 

     //build the purchase order object 
     let order: UpdatePurchaseOrder = { 
      SendEmail: true, 
      PurchaseOrderNumber: this.form.controls["purchaseOrderNumber"].value, 
      Attachment: attachment 
     } 

     //call the web api and pass the purchaseorder object 
     this.updatePoService 
      .updatePurchaseOrder(this.form.controls["purchaseOrderRequestId"].value, order) 
      .subscribe(data => { 
       if (data) { 
        this.saveSuccess = true; 
       } 
       else { 
        this.saveSuccess = false; 
       } 
      }, 
       error => this.errors = error, 
       () => this.res = 'Completed' 
      ); 
    } 

です。あなたは、この非同期呼び出しが同期することはできません

に関して、 -Alan-

Answer 1

。しかし、観測ファイルを利用して、ファイルが読み込まれるまで待つことができます。

//when the submit button is clicked 
onSubmit =() => { 
    let file = Observable.create((observer) => { 
     let fr = new FileReader(); 
     let data = new Blob([this.attachment]); 
     fr.readAsArrayBuffer(data); 
     fr.onloadend =() => { 
      observer.next(fr.result); 
      observer.complete() 
     }; 
     fr.onerror = (err) => { 
      observer.error(err) 
     } 
     fr.onabort =() => { 
      observer.error("aborted") 
     } 
    }); 
    file.map((fileData) => { 
      //build the attachment object which will be sent to Web API 
      let attachment: Attachment = { 
       AttachmentId: '0', 
       FileName: this.form.controls["attachmentName"].value, 
       FileData: fileData 
      } 
      //build the purchase order object 
      let order: UpdatePurchaseOrder = { 
       SendEmail: true, 
       PurchaseOrderNumber: this.form.controls["purchaseOrderNumber"].value, 
       Attachment: attachment 
      } 
      return order; 
     }) 
     .switchMap(order => this.updatePoService.updatePurchaseOrder(this.form.controls["purchaseOrderRequestId"].value, order)) 
     .subscribe(data => { 
       if (data) { 
        this.saveSuccess = true; 
       } else { 
        this.saveSuccess = false; 
       } 
      }, 
      error => this.errors = error, 
      () => this.res = 'Completed' 
     ); 
}