Angular2 - read binary file from input file and bind it to object

问题

I have get the file binary content of multiple file upload inputs that are binded to an array of structured object.

The scenario is this:

I have a class like this:

export class PriceList {
    public idPriceList: number;
    public code: string;
    public name: string;
    public binary: any;//this property has to contain the binary content of the selected file
}

Then I have my array that is filled by webapi and is used to compose the form:

public listFile: PriceList[] = [];

Now in component I have implemented a loop in order to compose a form where the user can select the files to upload for each PriceList item:

<ng-contrainer *ngFor="let t of listFile">
<tr>
    {{t.code}}<input type="file" id="ImageBinary" (change)="fileChange($event)">
</tr>
</ng-container>

ts function to manage the binary content:

  fileChange(e) {

    var file = e.target.files[0];
    .......
    console.log(e);
  }

What I want to to is bind the binary content of the files to the "binary" property of the object.

I need to pass the element to fileChange function, something like this:

fileChange($event,t)

But if I extend the function, it will not get hit...

I don't know how I have to move...

Thanks to support

回答1:

Adding the value to your fileChange function should be fine.

I've included a link to a StackBlitz that shows it working. Here, is uses FileReader to read the binary into an ArrayBuffer:

https://stackblitz.com/edit/angular-meo6yz

<input type="file" id="ImageBinary" (change)="fileChange($event, t)">

  fileChange(event, item) {
    item.binary = event;
    var r = new FileReader();
    r.onload = function(e) { 
      item.binary = r.result
    }
    r.readAsArrayBuffer(event.target.files[0]);
  }

来源：https://stackoverflow.com/questions/50218676/angular2-read-binary-file-from-input-file-and-bind-it-to-object

标签

angular

angular2-forms