如果在Vue中使用<input type="file">
上传文件,并设置了文件个数的限制,那么在达到限制后,再次上传相同的图片可能不会触发change
事件。这是因为浏览器认为文件并没有发生变化,所以不会触发change
事件。
解决这个问题的一种方法是,在每次上传文件后,清空输入框中的值。这可以通过设置input
元素的value
属性为空字符串来实现。例如:
<input type="file" @change="handleFileChange" :value="''">
或者在Vue组件中,你可以使用ref
来获取输入框的引用,然后在handleFileChange
方法中清空输入框的值:
<input type="file" @change="handleFileChange" ref="fileInput">
methods: {handleFileChange(event) {const files = e.target.files;// 个数限制if (files.length > 3) {alert(`最多只能上传 3 个文件`);// 重置input,以便可以再次选择文件this.$refs.fileInput.value = ''; // 清空输入框的值}}
}