使用角材料5上传文件

Question

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

应用程序组件.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>

应用程序组件.ts

export class AppComponent {
  selectedFile: File=null;
  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  constructor(private _formBuilder: FormBuilder, private http: HttpClient) {}
  ngOnInit() {
   this.firstFormGroup = this._formBuilder.group({
     firstCtrl: ['', Validators.required]
    });
   this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

但我收到了这个错误

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

知道这段代码在没有角度材料的情况下也能很好地工作。有什么问题吗？

Answer 1

我有同样的问题，

\n\n

尝试这样做，

\n\n

\r\n

\r\n

    <button mat-raised-button (click)="openInput()">Select File to Upload</button>\r\n    <input id="fileInput" hidden type="file" (change)="fileChange($event.target.files)" name="file" accept=".csv,.xlsv">

\r\n

\r\n

\r\n

\n\n

\r\n

\r\n

  openInput(){ \r\n        document.getElementById("fileInput").click();\r\n   }

\r\n

\r\n

\r\n

\n\n

上面的代码所做的只是创建一个 Material 按钮并调用 openInput() 方法，该方法稍后将该按钮替换为下面的 HTML 代码

\n\n

<input id="fileInput" hidden type="file" >

\n\n

这对我有用。

\n\n

快乐编码 \xe2\x98\xbb

\n

Answer 2

更快的解决方案是使用 https://github.com/danialfarid/ng-file-upload：

<md-button class='md-raised md-primary' id='uploadFile' ngf-multiple='true' ngf-select='upload($files, $file, $event)'

type='file'> 上传文件

否则你将不得不使用这样的自定义代码：

<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">

编辑：

在您的 HTML 中：

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