如何获取我正在上传的文件的名称

Question

我正在使用 angular-file-uploader (https://www.npmjs.com/package/angular-file-uploader) 上传文件，它工作正常，但我找不到获取文件名的方法，我想要类似的东西将它分配给一个变量，以便我以后可以用来下载它。

我得到了一个具有以下 html 模板的组件：

<angular-file-uploader 
    [config]="afuConfig"
    (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

和打字稿：

this.afuConfig = {
    uploadAPI: {
        url:"http://localhost:3000/api/containers/container/upload",
    }
};

DocUpload(res){
    console.log(res);
    //I want something like this..
    //console.log(somehow.getFileName())
}

Answer 1

您必须向名为 fileUpload1 的模板添加一个选择器，例如：

<angular-file-uploader
  #fileUpload1
  [config]="afuConfig"
  (ApiResponse)="DocUpload($event)"
></angular-file-uploader>

在组件的 TypeScript 部分，您将 ViewChild 属性添加到 class:

@ViewChild('fileUpload1')
private fileUpload1: AngularFileUploaderComponent;

最后你可以在 DocUpload 函数中获取文件名，如下所示：

DocUpload(res) {
  console.log(this.fileUpload1.allowedFiles[0].name);
}

allowedFiles属性是所有选中文件的数组。如果你想要第一个，你必须使用 allowedFiles[0] 然后通过 name 属性读取名称。

如何获取我正在上传的文件的名称

How can I get the name of the file I'm uploading

angular

angular-file-upload