angular - 上传后如何清除表单数据

Question

我有一个很好的上传方法，但我正在尝试修改它，以便在上传完成后删除表单数据。具体来说，我试图在上传后删除文件的名称（wrong.png），但我想确保如果我再次单击上传，则不会留下最后一个文件的痕迹。

我尝试使用 formData.reset()，并将 file=null 设置为 angular，但都没有工作。

HTML

<h1>Upload new file (.png or .jpg)</h1>
<input #file type="file" multiple (change)="upload(file.files)" />

角度

upload(files) {
    if (files.length === 0)
        return;

    const formData = new FormData();

    for (let file of files) {
        formData.append(file.name, file);
    }
    const uploadReq = new HttpRequest('POST', `/api/FileUpload`, formData, {
        reportProgress: true,
    });

标签： angularfile-upload

Answer 1

如果您希望所选文件在 POST 请求完成后消失，请将文件类型输入的值设置为null. 您可以通过管道传输您的 observable 并使用它tap()来实现这一点。

@ViewChild('file') file;
upload(files) {
  if (files.length === 0)
      return;

  const formData = new FormData();

  for (let file of files) {
      formData.append(file.name, file);
  }
  const uploadReq = new HttpRequest('POST', `/api/FileUpload`, formData, {
      reportProgress: true,
  }).pipe(tap(_ => {
    this.file.nativeElement.value = null
  });
}