分类信息网站的建设维护,页面设计有哪几种风格,建设部网站 测绘规章,潍坊网站建设公司有哪些内容前端读取文件当文件选择相同文件名的文件#xff0c;内容不会变化
今天遇到个奇怪的bug#xff0c;使用打开文件#xff0c;并选择文件时#xff0c;正常情况会读取文件信息。
但是如果先选择相同的文件名#xff0c;则内容不会发生变化。
先说结论
只要不使用事件中e…前端读取文件当文件选择相同文件名的文件内容不会变化
今天遇到个奇怪的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);
});
