Question

第一次在此处发布问题?！

因此，我一直在尝试创建具有拖放功能的文件上传组件，但是每当我尝试连续两次添加相同的文件时，都不会发生任何事情。没有错误，什么都没有。我的startUpload()函数根本没有执行。

要复制我的问题，请按照以下步骤操作：

在拖放或使用按钮的同时向阵列添加文件（我们称其为test1.png）
重复第一步，您将看到没有文件添加到阵列。

您可以在数组中两次添加相同的文件，但不能连续添加。添加test1.png，然后添加test2.png，然后再次添加test1.png。

我知道我的解释有点混乱，所以这是我制作的Stackblitz项目的链接，以显示我遇到的问题：

https://stackblitz.com/edit/angular-dragdropupload

预期的行为是，即使文件相同，我也可以将其两次添加到文件数组中。

Answer 1

您可以连续两次拖放同一文件，但是不能使用加号按钮两次添加同一文件。

您需要做的是在添加每个文件后清除输入控件的值。

import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";

...

export class FileUploadComponent implements OnInit {

  @Input() accept = "image/*";

  // get reference to fileInput DOM element
  @ViewChild('fileInput', null) fileInput: ElementRef;

  ...

  startUpload(event) {
    for (let i = 0; i < event.length; i++) {
      const file = event[i];
      if (file.type.split("/")[0] !== "image") {
        console.error("The file type of", file.name, "is not supported");
      } else {
        this.files.push(file);
        console.log(file);
      }
      //  clear fileinput box after adding file
      this.fileInput.nativeElement.value = '';
    }
  }

  ...

}

Answer 2

您在这里所做的事情是，您正在监听输入中的“ change”事件，并且此事件的工作方式是，由于您将相同的确切文件上载到该表单控件，因此它正确检测到这里没有任何变化，也没有触发您的功能。

在我看来，从逻辑上讲这是有道理的。但是，如果您仍然想实现此功能，请更改您正在收听的事件。更改和输入将仅以此方式运行，您可以使用（单击）事件。

Answer 3

@paul的解决方案是正确的，但只需将重置值放在For后面

startUpload(event) {
    for (let i = 0; i < event.length; i++) {
      const file = event[i];
      if (file.type.split("/")[0] !== "image") {
        console.error("The file type of", file.name, "is not supported");
      } else {
        this.files.push(file);
        console.log(file);
      }
    }

    this.fileInput.nativeElement.value = '';
}

无法将同一文件连续两次添加到数组中（文件上传表单）

3 个答案: