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

Bunny02122023-11-07 16:05

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

今天遇到个奇怪的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);
		}
	});
};

解决方式

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

之后只需要读取这个变量的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);
});