Блог

Я создал функцию загрузки в служебном файле в Angular, которая отправляет запрос post в API для загрузки файла, например

 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. Как я могу этого добиться?

Заранее благодарю вас.

Прочитайте подробную информацию о файлах, используя 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
        });
    }
}
 

Используйте final list для отображения деталей.