答案 0 :(得分:1)
您可以找出这个demo可能对您有帮助
模板文件:
img
元素以显示图像预览
<img [src]="previewImg" *ngIf="previewImg"/>
类文件:
URL.createObjectURL()
是一个静态方法,该方法创建一个DOMString,该DOMString包含表示参数中给定对象的URL。
bypassSecurityTrustUrl
绕过安全性,并将给定的值信任为安全样式URL,即可以在超链接或<img src>
中使用的值。
constructor(private sanitizer: DomSanitizer) {} // inject the DomSanitizer
previewImg: SafeUrl;
this.uploader.onAfterAddingFile = (file) => {
console.log('***** onAfterAddingFile ******')
this.previewImg = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(file._file)));;
}
别忘了包含import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
答案 1 :(得分:1)
我找到了解决方案
我已经在您的https://stackblitz.com/edit/angular-ng2-file-upload上进行了测试,请尝试此方法
export class AppComponent implements OnInit {
url = 'https://evening-anchorage-3159.herokuapp.com/api/';
uploader = new FileUploader({
url: this.url,
maxFileSize: 1024 * 1024 * 1
});
name = 'Angular 5';
//added this two variable here
imageUrlOfLogo:string='';
logoFileNameFile?: File;
ngOnInit() {
// your own code here
}
// added this code here
handleLogoFileInput(file: any) {
var item = file.item(0);
this.logoFileNameFile = file.item(0);
var reader = new FileReader();
reader.onload = (event: any) => {
this.imageUrlOfLogo = event.target.result;
}
reader.readAsDataURL(this.logoFileNameFile as File);
}
}
component.html
<p>Maximun allowed file size is 1MB</p>
<img [src]="imageUrlOfLogo" style="width:50%; height:90px;" *ngIf="logoFileNameFile">
<input type="file" ng2FileSelect [uploader]="uploader" (change)="handleLogoFileInput($event.target.files)">
<button (click)="uploader.uploadAll()">Upload </button>
答案 2 :(得分:0)
这是使用FileReader
显示缩略图准备好图像时的答案
import { Component, OnInit } from '@angular/core';
import {FileUploader} from 'ng2-file-upload';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
url = 'https://evening-anchorage-3159.herokuapp.com/api/';
ready = false;
thumb="";
uploader = new FileUploader({
url: this.url,
maxFileSize: 1024 * 1024 * 1
});
name = 'Angular 5';
ngOnInit() {
this.uploader.onAfterAddingFile = (file) => {
console.log('***** onAfterAddingFile ******')
var image_file=file._file
const reader = new FileReader();
reader.addEventListener('load', () => {
console.log(reader.result)
this.ready=true;
this.thumb=reader.result.toString();
});
reader.readAsDataURL(image_file);
}
this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
console.log('ImageUpload:uploaded:', item, status, response);
};
this.uploader.onCompleteAll = () => {
console.log('******* onCompleteAll *********')
}
this.uploader.onWhenAddingFileFailed = (item: any, filter: any, options: any) => {
console.log('***** onWhenAddingFileFailed ********')
}
}
}
您的HTML看起来像这样
<hello name="{{ name }}"></hello>
<p>Maximun allowed file size is 1MB</p>
<img [src]="thumb" *ngIf="ready"/>
<input type="file" ng2FileSelect [uploader]="uploader">
<button (click)="uploader.uploadAll()">Upload </button>