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

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

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

原因为 onChange 的触发条件是 value的变化。当我们选取文件上传后,value的值为该文件在磁盘中的地址。如:C:\test\xx.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}/>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容