从选择中删除后，上传文件不允许我选择相同的文件

Question

我有这段代码，可以让我选择多个文件，然后将其上传到服务器。我使用 input type='file' 然后我添加到文件列表中选择的文件（例如我可以单击按钮，选择文件'A'，然后再次单击相同的按钮并选择文件“B”，我的计数器是 2）。我还有一个按钮可以从选择中删除所有文件（如果您确实错误地选择了文件）。然后当我尝试重新选择相同的文件时，我的计数器仍然设置为 0。如果我选​​择不同的文件，则不会发生此问题，然后删除它并选择我想要的文件。 为了更简单，假设您有文件：

文件A.jpg、文件B.jpg、文件C.png

当我选择 FileA 时，计数器变为 1，然后我单击删除，计数器变为 0。

然后我想重新选择相同的 FileA，但它不计为已选择，只要我选择了与以前相同的文件，计数器仍设置为 0。

我的状态是这样的：

this.state={
          selectedFile:null,
          ile:0,
          lista:"",
       }

这是我的文件处理：

async handleRemove(){
    await this.setState({
      selectedFile:null,
      ile:0,
      lista:"",
      })
  data= new FormData();
  }

async handleSubmitFile(e) {
          await this.setState({selectedFile:e.target.files,})
          for(var x=0;x<this.state.selectedFile.length;x++){
                let rozszerzenie=this.state.selectedFile[x].name.split(".").pop();
                if(rozszerzenie.toUpperCase()==='PNG' || rozszerzenie.toUpperCase()==='JPEG' || rozszerzenie.toUpperCase()==='PDF' || rozszerzenie.toUpperCase()==='JPG')
                    {
                      data.append('images[]',this.state.selectedFile[x]);
                      if (this.state.lista.includes(this.state.selectedFile[x].name)){
                      }
                  else{await this.setState({
                      ile:this.state.ile+1,
                      lista:this.state.lista+this.state.selectedFile[x].name+"\n",
                  })
                  ;}
                }
                else{
                      alert("Błędny format pliku, proszę przesyłać tylko PNG, PDF oraz JPG/JPEG");
                      return;
                }  
              }
  }

我的回归变得简单

<input type='file' onChange={this.handleSubmitFile} multiple name='file' id='image' accept='application/pdf, image/*'/>
{this.state.ile}- number of files selected
{this.state.lista}-list of all files
<button type="button" className="fileupdate" onClick={this.handleRemove}>Remove files</button>

我觉得它以某种方式记住了上次选择，并且不允许重新选择它。有什么想法可以绕过它吗？

Answer 1

我的解决方案：从队列中删除一个元素后，您需要清除输入值。

<input id="my-file" type="file" />

document.getElementById('my-file').value = "";

Answer 2

<input type='file' onChange={this.handleSubmitFile} multiple name='file' id='image' accept='application/pdf, image/*'/ value={this.state.selectedFile}>

你需要给input加上value属性，所以当你清除selectedFile时，那么你的input也应该设置为null，因为onChange对变化起作用，所以如果文件没有变化它不会触发。