input 上传文件 及其避坑

       const handleImport = () => {
           console.log(props.match.params.name);
           document.getElementById('fileUploader').click();
         };


        <input
          type="file"
          id="fileUploader"
          name="file"
          accept=""
          onChange={(event) => {
            uploadFile(event);
            event.target.value = null; // 清除输入元素的值
          }}
          placeholder="Upload file"
          style={{ visibility: 'hidden', width: 0, height: 0 }}
        />

const uploadFile = async (event) => {
    let fileList: FileList = event.target.files;

    if (fileList.length > 0) {
      let file = fileList[0];
      let formData = new FormData();
      formData.append('excelfile', file);


      await props.dataService.importTableData(formData, route);
    }
  };

使用原生input上传文件一定要在change事件中加上event.target.value = null; // 清除输入元素的值

原因：浏览器的安全机制，当你选择同一个文件时，onChange事件不会被触发，因为从浏览器的角度看，输入的值并没有改变