前端读取文件当文件选择相同文件名的文件，内容不会变化

前端读取文件当文件选择相同文件名的文件，内容不会变化

今天遇到个奇怪的bug，使用打开文件，并选择文件时，正常情况会读取文件信息。

但是如果先选择相同的文件名，则内容不会发生变化。

先说结论

只要不使用事件中event.target.files[0]，event事件即可。

// 前端读取文件当文件选择相同文件名的文件，内容不会变化// 问题描述：当选择相同文件名的文件时，内容不会发生变化。// 解决方案：避免使用 event.target.files[0]，直接读取 fileInput.value.files[0]。// 示例代码：const fileInput = document.getElementById("fileInput");fileInput.addEventListener('change', () => {const file = fileInput.files[0];if (file) {const reader = new FileReader();reader.onload = (e) => {const text = e.target.result;store.markdownText = text;};reader.readAsText(file);}
});

原因分析

因为我们是用的方法使用的是change事件意思为，当文件发生改变的时候才会触发这个事件，于是如果文件是之前的文件那么event中的内容则不会发生变化。

const handelDocumentImport = () => {fileInput.value.click();fileInput.value.addEventListener('change', (event: any) => {// 不能使用// event.target.files[0];const file = fileInput.value.files[0];if (file) {const reader = new FileReader();reader.onload = (e: any) => {const text = e.target.result;store.markdownText = text;};reader.readAsText(file);}});
};

解决方式

先定义变量用于存储文件inputfile中的内容，之后每次文件点击修改时都将内容存储到这个变量中

之后只需要读取这个变量的files即可

const fileInput = document.getElementById("fileInput");fileInput.value.addEventListener('change', () => {const file = fileInput.value.files[0];if (file) {const reader = new FileReader();reader.onload = (e: any) => {const text = e.target.result;store.markdownText = text;};reader.readAsText(file);
});