如何在使用 Angular 6 中的 ngx-file-drop 上传之前预览图像？答案

【问题标题】：how to preview image before upload using ngx-file-drop in angular 6?如何在使用 Angular 6 中的 ngx-file-drop 上传之前预览图像？
【发布时间】：2019-02-20 03:11:53
【问题描述】：

我正在使用“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 吗？来自 (onFileDrop)="dropped($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();    }

【问题讨论】：

你最后的笔记对我来说似乎不是很清楚。
// 我正在尝试像 (change)="myFuc($event)" 一样实现，但它对于 (onFileDrop)="dropped($event)" 失败并作为事件得到错误。 target 或 event.target.files[0] 为空
我只想在上传到服务器之前显示从 (onFileDrop)="dropped($event)" 获取的图像文件
你能在stackblitz上举个例子吗

标签： angular file-upload angular6 ng-file-upload

【解决方案1】：

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;
            };
        });
    }

【讨论】：

【解决方案2】：

<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;
     };
});

【讨论】：