上传带有角度5和材料的文件答案

【问题标题】：upload file with angular 5 and material上传带有角度5和材料的文件
【发布时间】：2018-02-20 16:24:51
【问题描述】：

我正在使用 Angular 5 和 material library。我需要上传一个文件，但在文档中，我没有找到完成此任务的解释。

有同样需要的人可以给我推荐一个好的教程或文档吗？

Tnx

【问题讨论】：

（不使用材料，但可能对其他人有帮助：gist.github.com/stuartaccent/51afc6b17d89d4dc6f3968ede5d789b6 / stackblitz.com/edit/…）
这已在similar question 中得到答复。你可以参考我那里的回答。

标签： angular file-upload material-design angular-material

【解决方案1】：

有一个很好的库可以处理这个也遵循 Marerial 设计的要求。见附件：

TeraData file-upload example

【讨论】：

非常好的包。满满的爱
FileInput 是当前组件。

【解决方案2】：

我遇到了同样的问题，我使用 Angular Material 个性化了一个组件，没有外部库，并将所选文件的名称反馈到字段中：

HTML

<mat-form-field class="columns">
    <mat-label *ngIf="selectedFiles; else newFile">{{selectedFiles.item(0).name}}</mat-label>
    <ng-template #newFile>
        <mat-label>Choose file</mat-label>
    </ng-template>
    <input matInput disabled>
    <button mat-icon-button matSuffix (click)="fileInput.click()">
        <mat-icon>attach_file</mat-icon>
    </button>
    <input hidden (change)="selectFile($event)" #fileInput type="file" id="file">
</mat-form-field>

selectFile(event) {
    this.selectedFiles = event.target.files;
}

【讨论】：