Angular 2 : get image from file upload

Question

嗨，在我的 Angular 2 应用程序中，我正在使用 ng2-file-upload:

<input type="file" ng2FileSelect [uploader]="uploader" multiple (change)="onChange($event)">

我想在 uploader 或 event 对象的 javascript 代码中创建一个 image 对象的实例。有点像:

public onChange(event) {
   let item = this.uploader.queue[0];
   let img = new Image();

   img.src = item.SOMETHING;
       OR
   img.src = event.SOMETHING;

}

我不知道该怎么做。

Answer 1

您可以在没有任何第三方库的情况下做到这一点。

helloworld.component

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html',
  styles: [`
    .preview img{
      max-height: 50px;
    }
  `]
})
export class HelloWorld {

  // Declaring the variable for binding with initial value
  yourName: string = '';

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
      let file: File = fileList[0];
      var img = document.querySelector("#preview img");
      img.file = file;

      var reader = new FileReader();
      reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
      reader.readAsDataURL(file);
    }
  }
}

src/hello_world.html

<div id="preview" class="preview">
  <img src="">
</div>
<form>
  <input type="file" (change)="fileChange($event)" placeholder="Upload file">
</form>

Working plunker