File upload 上传文件使用角材料5

我试图上传文件（角度5）使用角度材料5

app.component.html

    <mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">

  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Upload your audio file</ng-template>
      <mat-form-field>
          <input matInput  
          style="display: none" 
          type="file" (change)="onFileSelected($event)" 
          #fileInput name ="file" formControlName="firstCtrl" required>
      <button mat-button (click)="fileInput.click()" >Select File</button>
  </mat-form-field>
  <div>
    <button mat-button matStepperNext>Next</button>
  </div>
</form>

但我犯了这个错误

ERROR Error: Input type "file" isn't supported by matInput.

知道了这段代码，没有棱角材料也能很好地工作。有什么问题吗

更快的解决方案是使用 :

然后为您服务：

uploadFile(files: any[]): Observable<HttpResponse<Blob>> {
    if (files.length === 0) {
      return;
    }

    const formData = new FormData();
    for (const file of files) {
      formData.append(file.name, file);
    }

    return this.http.post(`${apiUrl}/yourServiceEndPoint`, formData, {
      observe: "response",
      responseType: "blob"
    });
  }

uploadFile（文件：any[]）：可观察{
如果（files.length==0）{
返回；
}
const formData=new formData（）；
for（文件的常量文件）{
formData.append（file.name，file）；
}
返回此.http.post（`${APIRL}/yourServiceEndPoint`，formData{
观察：“回应”，
响应类型：“blob”
});
}

我也有同样的问题

试着这样做

选择要上载的文件

看起来好像不受支持：当然，角度材质不支持。但我正在寻找解决方案我想这是AngularJS指令，他用的是Angularyes，看起来很旧，让我更新我的答案。在我结束时，这将导致：

错误：mat表单字段必须包含MatFormFieldControl。

在应用程序模块中导入以下行，然后在ng模块导入中导入它们将解决您的问题

从“@angular/material”导入{MatFormFieldModule，MatInputModule}
<md-button class='md-raised md-primary' id='uploadFile' ngf-multiple='true' ngf-select='upload($files, $file, $event)'

<label class="md-secondary md-raised md-button" md-ink-ripple for="input-file">
      <span>Select File to upload</span>
</label>
<input type="file" ngf-select ng-model="input-file" name="input-file" id="input-file">

 <input #file type="file" nbButton multiple (change)="upload(file.files)" /> 

upload(files: any) {
    this.yourServiceToUploadFiles.uploadFile(files).subscribe(
      (response: any) => { .......})}

uploadFile(files: any[]): Observable<HttpResponse<Blob>> {
    if (files.length === 0) {
      return;
    }

    const formData = new FormData();
    for (const file of files) {
      formData.append(file.name, file);
    }

    return this.http.post(`${apiUrl}/yourServiceEndPoint`, formData, {
      observe: "response",
      responseType: "blob"
    });
  }