input[type=’file’] 重复上传同一个文件不触发 onChange 函数

使用antd的upload组件，发现csv文件总是提示failed，所以只能用原声input实现upload。但是又发现了一个新的问题：

input[type= file ] 连续上传同一个文件（哪怕文件名字没改，但是内容改了也不成功）触发不到 onChange 事件 或者使用antd的 Upload 组件只会调用一次 onChange 函数，之后点击上传没反应。

原由于 onChange 的触发条件是 value的变化。当我们选取文件上传后，value的值为该文件在磁盘中的地址。如：C: estxx.docx 。所以，我们应该在每一个onClick的时候都把value值清空。

具体做法： 

1. 原声input ，给<input />标签加上onClick方法

onClick(event: React.MouseEvent<HTMLInputElement, MouseEvent>){

      //for upload the same file

        (event.target as HTMLInputElement).value = “”;

    },

2. antd的input上传file

对于文件输入无效，由于浏览器只允许读取而不是写入输入。可调用Input身上的setValue(value: string, callback?: () => void): void方法，即可解决。

ref={uploadIptRef}
onClick={(e) => {uploadIptRef.current?.setValue(“”)}}

3.antd本身的Upload（不提议，遇到了许多小坑）

onFileChange(fileList){

if(…){

…

}else{

…

}

setStatethis.setState({fileList:[…fileList]});}

…

<UploadfileList={this.state.fileList}onChange={this.onFileChange}/>