Question

在将图像拖放到ngx-input-file中后，如何获取文件名。

请看下面的例子，

stackblitz

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

Answer 1

您可以检索文件元数据。 InputFileComponent类将files数组公开为公共属性。数组中的每个file依次具有以下属性：

lastModified
lastModifiedDate
名称
大小
类型
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

Answer 2

如果您只想获取第一个上传的文件名称和其他属性，请执行以下操作：

HTML：

<input-file fileLimit="1" fileAccept="image/*" (change)="fileUpload($event)"></input-file>

功能：

fileUpload() {
    this.fileData = <File>this.InputFileComponent.files[0].file;
    if (this.fileData !== null) {
      ---call some other function---
   }    
}

您也可以参考他们官方Github Page中的示例。

Answer 3

您的HTML应该是这样的：

<input-file (change)="drop()"
    inputId="files"
    placeholder="My files"
    [(ngModel)]="file">
</input-file>

在您的ts文件中，您定义了drop()函数：

drop(): void {

    console.log( this.file);

}

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

3 个答案: