主页 / coding / 问题 / 79156531
Accepted
Tim
Asked: 2024-11-05 02:07:19 +0800 CST

您能否在 p-fileUpload 表中添加额外的列以允许与每个文件关联的元数据？

  • 772

我有一个带有 Angular/html 前端的应用程序，其中有一个 p-fileUpload 组件，允许用户一次上传多个文件。

这很简单，我只需要在 html 文件中向组件添加 [多个] 即可。

<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3" 
              chooseLabel="Choose File(s)..."
              [multiple]="true">
</p-fileUpload>

它允许用户将多个文件上传到一个表中，该表显示每个文件的名称及其大小，如下所示......

在此处输入图片描述

我想要做的是向 p-fileUpload 组件添加可编辑的列，以便表也可以容纳与每个文件相关的元数据。

该表格看起来像这样，用户还可以添加与每个文件相关的标题、文档类型和注释：

它看起来像这样：

在此处输入图片描述

有什么建议吗？

提前致谢。

html

1 个回答

  1. Best Answer

    根据 PrimeNG 官方文档页面，您确实可以自定义上传组件以在下面显示表格。

    下面，我通过修改来自 wiki 的代码添加了一个示例。

    <p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3"
              chooseLabel="Choose File(s)..." [multiple]="true" (onSelect)="onFileSelect($event)" (onRemove)="onFileRemove($event)" (uploadHandler)="onUpload($event)">
    <ng-template pTemplate="content">
        <table class="ui-fileupload-files">
            <thead>
                <tr>
                    <th>File Name</th>
                    <th>Size</th>
                    <th>Title</th>
                    <th>Document Type</th>
                    <th>Comments</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let file of files; let i = index">
                    <td>{{ file.name }}</td>
                    <td>{{ formatSize(file.size) }}</td>
                    <td>
                        <input type="text" [(ngModel)]="file.metadata.title" placeholder="Enter Title">
                    </td>
                    <td>
                        <input type="text" [(ngModel)]="file.metadata.documentType" placeholder="Enter Document Type">
                    </td>
                    <td>
                        <input type="text" [(ngModel)]="file.metadata.comments" placeholder="Enter Comments">
                    </td>
                    <td>
                        <button type="button" (click)="removeFile(i)">Remove</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </ng-template>
</p-fileUpload>
    • 1

相关问题