Question

我正在使用 ng2-file-upload ，文件已正确上传，但我也想显示以前上传的文件，我调用了API，并将所有以前上传的文件存储在数组中的数组，但如何在HTML页面上显示。

<div class="container">

    <div class="row">

        <div class="col-md-3">

            <h3>Select files</h3>

            Multiple
            <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th>Size</th>
                    <th>Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <td><strong>{{ item?.file?.name }}</strong></td>
                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    <td *ngIf="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>

                <button type="button" class="btn btn-success btn-s"
                        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s"
                        (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                </button>
                <button type="button" class="btn btn-danger btn-s"
                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>

        </div>

    </div>

</div>

我已将上传的文件提取到“队列”数组中，我如何在此处显示该文件

uploadfiles() {
        this.common.getData(url).subscribe(
            data => {
                this.queue.push({
                    name: file.Name,
                    id: file.Id,
                    size: file.Size
                })}

Answer 1

如果要在一个表中同时显示正在上传的文件和已经上传的文件，则有几种方法。

您可以首先显示进度文件，然后显示已经上传的文件：

<tbody>
  <tr *ngFor="let item of uploader.queue">
    <!-- Whatever you want to display -->
  </tr>
  <tr *ngFor="let uploadedFiles of queue">
    <!-- Whatever you want to display -->
  </tr>
</tbody>

请注意具有相同的数量，以便表具有相同的列数（例如，第二部分的进度列可以为空。取决于您要如何显示数据）

或者您可以将两个数组合并为一个，并用一个* ngFor显示它。为此，您将必须检查数据结构，以确保上传的文件与通过api获得的先前文件之间保持一致。
您应该以这种方式添加它，而不是只选择名称，大小和ID：

this.queue.push({
  file: file
})}

考虑“文件”对象的类型与上载程序队列中的文件相同。

这没有什么魔术，一切都取决于您要如何显示对象。

如何使用ng2-file-upload显示以前上传的文件

1 个答案: