react不能在不刷新页面的情况下使用fileinput两次

Question

我正在使用 html fileinput 使用 reactjs 上传文件，但是一旦我上传了一个文件，我就无法调用该函数来上传另一个文件，当然除非我刷新页面。

我的代码的简化版本是：

class Matrice extends React.Component {
  constructor(props) {
    super(props);
    this.fileInput = null;
  }

  uploadQuestion = async e => {
    console.log("uploading question");
    if (e.target.files[0]) {
      const form = new FormData();
      let type;
      if (e.target.files[0].type == "image/jpeg") type = ".jpg";
      if (e.target.files[0].type == "image/png") type = ".png";
      if (e.target.files[0].type == "image/gif") type = ".gif";
      // const fileName = this.props.current + type;
      form.append("files", e.target.files[0]); //filename
      form.append("ref", "exam"); // model
      form.append("refId", this.props.match.params.id); // id
      form.append("field", "media"); // name of field (image field)
      this.setState({ questionUploadLoading: true });
      const files = await strapi.upload(form);
      this.saveMontage(files, undefined, "question");
    }
  };

  render() {
    return (
      <>
        <input
          style={{ display: "none" }}
          ref={fileInput => (this.fileInput = fileInput)}
          onChange={this.uploadQuestion}
          className="file"
          type="file"
          id="imgAdd"
        />
        <button
          onClick={() => this.fileInput.click()}
          type="button"
          className="btn btn-secondary"
        >
          <i className="fas fa-image" />
        </button>
      </>
    );
  }
}

但是一旦我完成上传文件，就无法再次调用我的函数 uploadQuestion。也就是说， console.log('uploading question') 没有出现（第二次）。

我不知道可能是什么原因，但我猜有什么东西阻止了 onChange 处理程序，好像第二次上传文件不会“更改”触发器一样。

有没有人知道是什么导致了这种情况？

谢谢

Answer 1

您可以input通过将其设置value为空字符串来重置文件，然后您将能够再次使用它。

uploadQuestion = async (e) => {
    console.log('uploading question')
    if (e.target.files[0]) {
        // ...
        this.fileInput.value = "";
    }
}