读取JSON文件内容至input与textarea无报错但失败

看起来你已经能成功读取文件并在控制台输出内容了，这说明文件读取的核心逻辑是通的，问题大概率出在DOM元素操作或者作用域绑定上，我给你梳理几个常见的排查方向和修复方案：

1. 检查this作用域是否正确 #

在reader.onload回调里，默认的this指向的是reader对象本身，如果你原本的代码里是用this.$refs或者类似方式获取DOM元素，就会找不到目标元素。

修复方案：

• 提前保存外部作用域的this：

readJSONAfterRendering: function() {
  var self = this; // 保存当前组件/上下文的this
  var reader = new FileReader();
  reader.onload = function() {
    var jsonData = JSON.parse(this.result); // 这里的this是reader，没问题
    console.log(jsonData); // 能打印说明解析成功
    // 现在用self来访问外部作用域的DOM元素
    document.getElementById('input-id').value = jsonData.id;
    document.getElementById('textarea-request').value = jsonData.request;
    // 如果是Vue等框架，用self.$refs.inputId = jsonData.id;
  };
  // 记得添加reader.readAsText(file)的代码，你应该已经有了
}

2. 确认DOM元素是否存在 #

有可能你调用readJSONAfterRendering的时候，目标输入框和textarea还没渲染到页面上（比如在Vue的created钩子而不是mounted里调用），导致getElementById返回null，但因为你没对null做操作，所以控制台没报错。

检查方式：
在操作DOM之前加一行打印：

console.log(document.getElementById('input-id'));

如果输出null，就把方法调用时机放到DOM渲染完成之后（比如Vue的mounted，原生JS的DOMContentLoaded事件里）。

3. 确认JSON结构完全匹配 #

虽然控制台能打印内容，但要确保JSON里的字段名是完全大小写匹配的，比如你要取id，但JSON里是ID，那赋值就会是undefined，输入框就显示为空。

可以在控制台打印具体字段值验证：

console.log('id:', jsonData.id, 'request:', jsonData.request);

4. 原生JS完整参考示例 #

如果是纯原生JS场景，给你一个可直接参考的完整代码：

<input type="text" id="input-id" placeholder="ID">
<textarea id="textarea-request" placeholder="Request"></textarea>
<input type="file" id="file-input" accept=".json">

<script>
document.getElementById('file-input').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = function() {
    try {
      const jsonData = JSON.parse(this.result);
      // 确认字段存在
      if (jsonData.id !== undefined && jsonData.request !== undefined) {
        document.getElementById('input-id').value = jsonData.id;
        document.getElementById('textarea-request').value = jsonData.request;
      } else {
        console.error('JSON缺少id或request字段');
      }
    } catch (err) {
      console.error('JSON解析失败:', err);
    }
  };
  reader.readAsText(file);
});
</script>

你可以对照自己的代码，先从作用域和DOM存在性这两个最常见的问题入手排查，应该很快就能解决~

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