Typescript 在Angular中，如何在文件上传后清除文件上传文本框

为了简单起见，我们可以在html中使用template reference变量#input，将元素引用传递到函数中并清除值，使用input.value = null

为了保持简单，我删除了API调用，并将其替换为of(true) to mock和API调用！

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { of } from 'rxjs';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="row">
        <div class="mb-6">
            <label class="form-label" for="defaultFile">Upload file</label>
            <input type="file" class="form-control" id="defaultFile" (change)="onChange($event)" #input>
            <hr>
            <button type="button" class="btn btn-outline-theme" (click)="uploadFile(input)">Upload</button>
      </div>
    </div>
  `,
})
export class App {
  fileToUpload: File | null = null;

  constructor() {}

  onChange(event: any) {
    this.fileToUpload = event.target.files[0];
  }

  uploadFile(input: any) {
    if (!this.fileToUpload) {
      alert('No file selected.');
      return;
    }

    const formData: FormData = new FormData();
    formData.append('file', this.fileToUpload, this.fileToUpload.name);

    return of(true).subscribe(
      (response: any) => {
        console.log(response);
        input.value = null; // <- changed here!
      },
      (error: any) => {
        console.error(error);
      }
    );
  }
}

bootstrapApplication(App);

Stackblitz Demo