时间戳

首页 > 解决方案 > 如何使用 ng2-file-upload 显示以前上传的文件

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

问题描述

我正在使用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
                })}

标签： angularng2-file-upload

解决方案

如果您想在一个表格中同时显示正在上传的文件和已上传的文件，有几种方法可以做到。

您可以先显示正在处理的文件，然后显示已上传的文件：

<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
})}

考虑到“文件”对象与 uploader.queue 中的文件类型相同。

它没有什么神奇之处，一切都取决于您希望如何显示对象。

推荐阅读