一、场景
- 利用原始html input-type=“file” 写了一个上传文件的组件、但是每次上传之后,
- 再次选择文件就不会触发 onchange 事件, 上传导致页面报错
// trigger select file
getFilds = () =>{
const filedom = document.getElementById('file');
filedom.click()
}
// This function is used to listen for events uploaded by the button
fileinputChange = (event) =>{
const fileData = event.target.files[0];
if(fileData) this.send(fileData);
}
send = (fileData) =>{
fetch(...).then(res=>{
// promit infomation to users
...
})
}
... render
<div>
<input
type="file" id="file" accept=".xls,.xlsx"
style={{ display:"none", }} onChange={this.fileinputChange}
/>
<Button type="primary" onClick={this.getFilds}>上传excel</Button>
</div>
二、解决办法
使用 html-form-reset() 方法重置 type=“file” 的值。
form-reset MDN 使用方法传送门 https://developer.mozilla.org/
修改html code如下
// trigger select file
getFilds = () =>{...}
// This function is used to listen for events uploaded by the button
fileinputChange = (event) =>{...}
send = (fileData) =>{
fetch(...).then(res=>{
// promit infomation to users
...
// 在这里加入表单重置
const filedom = document.getElementById('Formreset');
filedom.reset()
})
}
<form id="Formreset">
<input
type="file" id="file" accept=".xls,.xlsx"
style={{ display:"none", }} onChange={this.fileinputChange}
/>
<Button type="primary" onClick={this.getFilds}>上传excel</Button>
</form>
三、注意事项
form.reset() 方法会表单项表单内所有表单项
运行该方法和点击表单的重置按钮是一样的效果.
因为案例这里我只有一个input表单项用于获取文件,所以使用这个方法最合适。