前端读取文件当文件选择相同文件名的文件,内容不会变化
今天遇到个奇怪的bug,使用打开文件,并选择文件时,正常情况会读取文件信息。
但是如果先选择相同的文件名,则内容不会发生变化。
先说结论
只要不使用事件中event.target.files[0]
,event
事件即可。
js
// 前端读取文件当文件选择相同文件名的文件,内容不会变化
// 问题描述:当选择相同文件名的文件时,内容不会发生变化。
// 解决方案:避免使用 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
中的内容则不会发生变化。
vue
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);
}
});
};
解决方式
先定义变量用于存储文件input
file中的内容,之后每次文件点击修改时都将内容存储到这个变量中
之后只需要读取这个变量的files
即可
js
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);
});