我正在使用“file-drop”标签在Angular 6上拖放图像。
<file-drop headertext="{{adCrud.uploadMediaText}}"
(onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)"
customstyle="filedrop" customstyle="adMedia"
(onFileLeave)="fileLeave($event)" >
我从(onFileDrop)="dropped($event)"
获得了文件[0],但我不知道如何在将其上传到服务器之前显示该图像,提前感谢:/
---------------
注意:我正在尝试实现以下方法,但可以找到event.target? from(onFileDrop)=“drop($ event)”
media1change(event) {
if (event.target.files && event.target.files[0]) {
const reader = new FileReader();
// tslint:disable-next-line:no-shadowed-variable
reader.onload = (event: ProgressEvent) => {
this.adCrud.media1 = (<FileReader>event.target).result;
// // console.log(this.profile);
// this.uploadmedia1();
};
reader.readAsDataURL(event.target.files[0]);
}
this.media1File = event.target.files[0];
this.uploadmedia1(); }
fileEntry
是FileSystemEntry的一个实例,但是如果你上传文件而不是文件夹,那么fileEntry
实际上是一个FileSystemFileEntry
实例。这意味着它有file()
方法,你可以这样做:
imageDropped($event: UploadEvent) {
const droppedFile = $event.files[0];
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
const reader = new FileReader();
fileEntry.file(file => {
reader.readAsDataURL(file);
reader.onload = () => {
this.imageUrl = reader.result;
};
});
}
<img [src]="**imageUrlPREVIEW**">
imageUrlPREVIEW;
...
const droppedFile = event.files[0];
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
const reader = new FileREader();
fileEntry.file((file: File) => {
reader.readASDAtaURL(file);
reader.onload = () => {
**this.imageUrlPREVIEW**= reader.result;
};
});