Angular2 - 从输入文件读取二进制文件并将其绑定到对象

我已获取绑定到结构化对象数组的多个文件上传输入的文件二进制内容。

场景是这样的：

我有一堂这样的课：

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
}

然后我的数组由 webapi 填充并用于组成表单：

public listFile: PriceList[] = [];

现在，在组件中，我实现了一个循环，以便编写一个表单，用户可以在其中选择要为每个 PriceList 项目上传的文件：

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

ts 函数来管理二进制内容：

  fileChange(e) {

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

我想要的是将文件的二进制内容绑定到对象的“二进制”属性。

我需要将元素传递给 fileChange 函数，如下所示：

fileChange($event,t)

但如果我扩展这个功能，它就不会被击中......

我不知道我该如何移动...

感谢支持

为您的产品增值fileChange功能应该没问题。

我提供了一个 StackBlitz 的链接，显示它的工作原理。这里，使用 FileReader 将二进制文件读入 ArrayBuffer：

https://stackblitz.com/edit/angular-meo6yz 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]);
  }