使用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}/>