在 TypeScript 中加载文件

Question

我是 TypeScript 和 Angular 的新手，我想从本地磁盘加载图像，将此图像存储在变量中并将此数据传递给另一个组件。

有人举了一些例子。我尝试在 Javascript 中使用一个示例，但它在 TypeScrupt 中不起作用。在 HTML 文件中使用这个：

 <input type="file" name="img" multiple>

我尝试使用 image 属性，但得到一个未定义的错误。我应该将数组字节传递给另一个组件还是该文件图像的路径？

Answer 1

由于 TypeScript 是 JavaScript 的超集，因此即使您使用的是 TypeScript ，您也可以直接从 JavaScript使用FileReader API。

在输入更改事件中，您可以绑定组件函数以使用(change). 这event.target.files是一个FileList，允许您通过索引直接访问文件：files[0]并将文件对象发送到 FileReader。

这里的问题是单个 FileReader 对象一次只能读取一个文件，因此在更新的示例中，我递归地遍历文件以确保一次只处理一个文件。

结果属性包含作为 URL 的数据，将文件数据表示为 base64 编码字符串。

这是使用 Angular 2 的示例组件 - TypeScript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'images',
  template: `
    <input type="file" name="img" multiple (change)="onChange($event)">
    <div *ngFor="let fileUrl of base64Files">
      <img  [src]="fileUrl" />
    </div>

  `
})
export class ImagesComponent implements OnInit {
  public base64Files: string[] = [];
  private files: any[] = [];
  private fileReader = new FileReader();

  public onChange(event: Event) {
    let files = event.target['files'];
    if (event.target['files']) {
      console.log(event.target['files']);
      this.readFiles(event.target['files'], 0);
    }
  };

  private readFiles(files: any[], index: number) {
    let file = files[index];
    this.fileReader.onload = () => {
      this.base64Files.push(this.fileReader.result);
      if (files[index + 1]) {
        this.readFiles(files, index + 1);
      } else {
        console.log('loaded all files');
      }
    };
    this.fileReader.readAsDataURL(file);
  }

}