Angular 选择文件后将文件信息渲染到 Datatable 的实现方法

你当前的代码已经完成了选中文件收集的基础逻辑，接下来补充弹窗交互、数据格式化、Datatable绑定的内容即可实现需求。

完整实现步骤 #

• 第一步：调整文件选择器与弹窗交互代码
  给input添加multiple属性支持多选，同时补充弹窗的确认/取消操作按钮：

<!-- 弹窗内的文件选择器 -->
<input type="file" multiple (change)="onFileChangeInfo($event)"/>
<!-- 弹窗底部操作区 -->
<button (click)="confirmSelect()">确认</button>
<button (click)="closeDialog()">取消</button>

• 第二步：补充TS业务逻辑
  新增文件大小格式化方法、确认选择触发逻辑，给Datatable准备适配格式的数据源：

// 临时存储选中的原始文件对象
myFiles: File[] = [];
// Datatable绑定的数据源
tableData: {fileName: string, fileSize: string}[] = [];
// Datatable显示列配置
displayedColumns: string[] = ['fileName', 'fileSize'];

onFileChangeInfo(event: any): void {
  // 如果需要每次选择清空之前的临时文件，保留下方一行，不需要可以删除
  this.myFiles = [];
  for (let i = 0; i < event.target.files.length; i++) { 
    this.myFiles.push(event.target.files[i]);
  }
}

// 确认选择按钮触发逻辑
confirmSelect(): void {
  // 格式化文件数据后赋值给表格数据源
  this.tableData = this.myFiles.map(file => {
    return {
      fileName: file.name,
      fileSize: this.formatFileSize(file.size)
    }
  });
  // 关闭弹窗
  this.closeDialog();
}

// 工具方法：字节转换为可读的文件大小单位
formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  const unitGap = 1024;
  const unitArr = ['Bytes', 'KB', 'MB', 'GB'];
  const unitIndex = Math.floor(Math.log(bytes) / Math.log(unitGap));
  return parseFloat((bytes / Math.pow(unitGap, unitIndex)).toFixed(2)) + ' ' + unitArr[unitIndex];
}

closeDialog(): void {
  // 此处填写你的弹窗关闭逻辑，例如用Angular Material Dialog则为this.dialogRef.close()
  // 清空input的value，避免第二次选同一个文件不触发change事件
  (document.querySelector('input[type="file"]') as HTMLInputElement).value = '';
}

• 第三步：绑定Datatable数据源
  以下为通用表格绑定逻辑，根据你使用的组件库（Angular Material Table/PrimeNG Table/自研表格）调整对应标签即可：

<table mat-table [dataSource]="tableData">
  <!-- 文件名列 -->
  <ng-container matColumnDef="fileName">
    <th mat-header-cell *matHeaderCellDef> 文件名 </th>
    <td mat-cell *matCellDef="let element"> {{element.fileName}} </td>
  </ng-container>
  <!-- 文件大小列 -->
  <ng-container matColumnDef="fileSize">
    <th mat-header-cell *matHeaderCellDef> 文件大小 </th>
    <td mat-cell *matCellDef="let element"> {{element.fileSize}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

扩展说明 #

如果需要叠加多次选择的文件，删除onFileChangeInfo方法内清空myFiles数组的代码即可，每次新选中的文件会追加到现有表格列表中。

内容的提问来源于stack exchange，提问作者Roberto Rodrigues