上传后如何清除表格数据

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

Answer 1

如果您希望所选文件在POST请求完成后消失，则将输入的文件类型的值设置为null。您可以通过管道传输可观察到的数据，并使用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
  });
}