input: file 上传相同文件没反应, onchnage 不触发,解决办法

参考 StackOverflow 中的回答: https://stackoverflow.com/questions/26634616/filereader-upload-same-file-again-not-working

有时候上传文件的时候,如果失败了,再选择这个文件上传,就不会触发上传了。
原因是前后两个文件是一样的,存在 input 中的 files 没有变化,而我们监听的是 onchange ,所以才没有触发

一直找不到 FileList 的清空方法,其实它也没有清空的方法,只有一个获取元素的方法 FileList.item(itemIndex)

MDN FileList: https://developer.mozilla.org/en-US/docs/Web/API/FileList#item()

后来总算在 StackOverflow 上找到了答案

<input type='file' @change='uploadFile'>
uploadFile(event){
	let inputDom = event.target // input 本身,从这里获取 files<FileList>
	let files = inputDom.files // input 中的文件,是 FileList 对象,一个类似数组的文件组,但不是数组,可遍历
	
	// ... 中间一些代码
	// 上传失败后
	inputDom.value = '' 
	// 给 inputDom 重新设置值,这样 inputDom 里的 files 就为空了,
	// 再选择同一个文件的时候就会触发 onchange 事件了
}
Logo

前往低代码交流专区

更多推荐