Angular 2：从文件上传获取图片

Question

您好，我的 Angular 2 应用程序正在使用 ng2-file-upload：

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

我想在 uploader 或 [=19] 的 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

Answer 2

你可以用 ng2-file-upload also.check 下面的代码

组件代码：

    import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
    import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
    import { FileItem } from 'ng2-file-upload';

    @Component({
       selector: 'app-image',
       templateUrl: './image.component.html',
       styleUrls : []
    })
    export class ImageComponent implements OnInit {

      public imageUrlPath: SafeUrl;
      public uploader: FileUploader;
      constructor(private sanitizer: DomSanitizer ){
           this.uploader = new FileUploader({
                allowedMimeType: [],
                maxFileSize: 10 * 1024 * 1024, // 10 MB
            });
            this.uploader.onAfterAddingFile = (fileItem) => {
                  fileItem.withCredentials = false;
                  this.imageUrlPath  = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)));
             };
       }
   ngOnInit(){}    

    }

html代码：

 <input type="file" ng2FileSelect [uploader]="uploader">
  <div>
   <img *ngIf="imageUrlPath" [src] = imageUrlPath>              
 </div>

关注这个 link:image preview, image directive

Angular 2：从文件上传获取图片

Angular 2: get image from file upload

ng2-bootstrap

angular