angular - 如何在ngx-input-file中获取上传文件的url和名称

Question

如何在angular ngx-input-file中拖放图片后获取文件名。

请看下面的例子，

stackblitz

此处选择或拖放图片后，如何获取拖放的图片名称和路径。我想要那个图片网址。

Answer 1

您可以检索文件元数据。 InputFileComponent 类公开了一个 files 数组作为公共(public)属性。数组中的每个 file 依次具有以下属性:

• 最后修改时间
• 上次修改日期
• 姓名
• 大小
• 输入
• webkitRelativePath

我根据您提供的链接创建了一个演示，供您试用。只需运行演示，放下图像，然后单击显示“日志文件”的文本，数据就会显示在控制台中。请调整代码以适合您的目的。

HTML

<!-- app.component.html -->
<mat-toolbar color="primary">
    <div class="container">
        <a (click)="logFiles()"> Log files </a>
    </div>
</mat-toolbar>
<!-- etc. -->

typescript

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { InputFileComponent } from 'ngx-input-file';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})

export class AppComponent { 
   @ViewChild(InputFileComponent) 
   private InputFileComponent: InputFileComponent; 

   logFiles() { console.log(this.InputFileComponent.files); } 
}

演示

StackBlitz