Question

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

情景如下：

我有一个这样的课程：

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>

用于管理二进制内容的函数：

  fileChange(e) {

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

我想要的是将文件的二进制内容绑定到＆＃34;二进制文件＆＃34;对象的属性。

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

fileChange($event,t)

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

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

感谢支持

Answer 1

将值添加到fileChange函数应该没问题。

我已经包含指向StackBlitz的链接，显示它正常工作。这里，使用FileReader将二进制文件读入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]);
  }

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

1 个答案: