使用角度5和材质上传文件

时间:2018-02-20 16:24:52

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

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

是否有人有同样的需求可以建议我一个好的教程或文档?

TNX

2 个答案:

答案 0 :(得分:9)

有一个很好的库可以处理这个要求,也遵循Marerial Design。见附件链接:

TeraData file-upload example

答案 1 :(得分:1)

我遇到了同样的问题,我使用Angular Material对组件进行了个性化设置,而没有外部库并且没有将所选文件的名称反馈给字段:

enter image description here enter image description here

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>

TS

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