如何用Node.js读取本地文件？本地JSON实时读取方案问询

嘿，我完全懂你遇到的困扰——单次读取本地JSON文件没问题，但文件更新后再读就拿到旧内容，要么就是根本触发不了读取逻辑对吧？这大概率是浏览器对文件输入控件的默认行为和“伪缓存”搞的鬼，我给你一套完整的解决方案，一步一步来：

首先，我们需要创建一个HTML页面，包含文件选择控件和内容展示区域，然后用JavaScript处理文件读取，同时解决文件变更后的重复读取问题。

1. HTML结构 #

先搭好基础页面，指定文件输入只接受.json格式，再加个区域用来展示读取后的JSON内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>本地JSON实时阅读器</title>
    <style>
        /* 简单美化一下界面 */
        body { padding: 20px; font-family: Arial, sans-serif; }
        #jsonContent { margin-top: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9; white-space: pre-wrap; }
    </style>
</head>
<body>
    <h2>选择本地JSON文件</h2>
    <p>修改文件后重新选择即可查看最新内容</p>
    <input type="file" id="jsonFileInput" accept=".json">
    <div id="jsonContent"></div>

    <script>
        // 下面是核心JavaScript代码
    </script>
</body>
</html>

2. JavaScript核心逻辑 #

我们需要做三件事：读取JSON文件、处理解析错误、解决文件变更后无法触发读取的问题：

// 获取页面元素
const fileInput = document.getElementById('jsonFileInput');
const contentArea = document.getElementById('jsonContent');

// 定义读取JSON文件的函数
function readAndDisplayJson(file) {
    const reader = new FileReader();
    
    // 文件读取成功后的处理
    reader.onload = function(e) {
        try {
            // 解析JSON并格式化显示
            const jsonData = JSON.parse(e.target.result);
            contentArea.textContent = JSON.stringify(jsonData, null, 2);
        } catch (err) {
            contentArea.textContent = `❌ 解析错误：不是有效的JSON文件 - ${err.message}`;
        }
    };
    
    // 文件读取失败的处理
    reader.onerror = function() {
        contentArea.textContent = '❌ 文件读取失败，请检查文件是否可访问';
    };
    
    // 以文本形式读取文件（JSON本质是文本）
    reader.readAsText(file);
}

// 监听文件选择事件
fileInput.addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
        // 读取并展示文件内容
        readAndDisplayJson(selectedFile);
        // 关键！重置输入框的值，这样修改文件后重新选择同一个文件也能触发change事件
        fileInput.value = '';
    }
});

关键细节解释 #

• 为什么要重置fileInput.value？
  浏览器默认情况下，如果你选择了同一个文件名的文件（即使内容已经修改），不会触发change事件，因为输入框的value没有变化。重置为空后，再次选择同一个文件时，value从空变为文件名，就会触发change事件，从而读取最新的文件内容。

• 关于“缓存问题”
  其实FileReader是直接读取用户选择的本地文件内容，不存在网络缓存的问题。你之前遇到的“缓存”现象，大概率就是上面说的“同一个文件不触发change事件”导致的，重置value就能解决这个问题。

• 错误处理
  加入了JSON解析错误和文件读取错误的提示，让用户能清楚知道哪里出了问题。

这样一来，用户每次选择文件（包括修改后重新选择），都会读取最新的JSON内容，完美解决你的需求～

内容的提问来源于stack exchange，提问作者user2701114