Question

我是TypeScript和Angular的新手我想从本地disck加载图像，将此图像存储在变量中并将此数据传递给另一个组件。有人举了一些例子。我尝试在javascript中使用示例但在ts中不起作用。在html文件中使用：

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

我尝试使用图像atrribute但是有未定义的错误。我应该将数组字节传递给该文件映像的其他组件或路径？

Answer 1

您正在寻找对本地资源的http请求。

访问https://angular.io/tutorial/toh-pt6#heroes-and-http了解相关信息。

将图像存储到服务中，您可以将该服务注入其他组件：https://angular.io/tutorial/toh-pt4#creating-a-hero-service。

Answer 2

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

在输入更改事件中，您可以使用(change)绑定ur组件函数来处理事件。 event.target.files是FileList，允许您通过索引ex：files[0]直接访问文件，并将文件对象发送到FileReader。这里的问题是单个FileReader对象一次只能读取一个文件，因此在更新的示例中，我会递归循环遍历文件，以确保一次只处理一个文件。

result属性包含数据作为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);
  }

}

在TypeScript

2 个答案: