如何在 Angular HTML 中显示上传文件的信息

Question

我在 Angular 的服务文件中创建了一个上传功能，它向 API 提交 post 请求以上传文件，就像这样

onUpload() {
    const formData = new FormData();
    formData.append('uploadfile', this.selectedFile, this.selectedFile.name);
    return this.http
      .post(api_url, formData, {
        reportProgress: true,
        observe: 'events',
        responseType: 'text',
      })
      .subscribe(res => {
        console.log(res);

      })
        
    }

我想同时获取那些上传的文件并显示文件名，也许在 HTML 的列表中显示一些其他信息。我怎样才能做到这一点？

提前致谢。

Answer 1

使用 change 事件读取文件的详细信息。

HTML :

<input type="file" (change)="onFilesUpload($event)">

TS :

list : any[];

onFilesUpload(event){

    // Iterate over selected files
    for( let file of event.target.files ) {
      
        // Append to a list
        this.list.push({
            name : file.name,
            type : file.type
            // Other specs
        });
    }
}

使用最后的 list 显示详细信息。

如何在 Angular HTML 中显示上传文件的信息

How to display information from uploaded file in Angular HTML

api

upload

post

http

angular