Vue3 SPA本地JSON文件读写：修复FileReader读取Blob接口错误

错误原因 #

1. 参数类型错误：你传入readAsText的是Vue3的ref响应式对象，而非实际的File实例，readAsText要求传入实现Blob接口的对象（File是Blob的子类），必须取ref的.value属性。
2. 异步操作处理错误：readAsText是异步方法，不能直接通过赋值获取结果，需要通过load事件回调拿到读取后的内容。

修复后的代码 #

<input
  type="file"
  @change="onFileChanged($event)"
  accept=".txt,.json"
/>

<script setup>
const uploaded_file = ref();

function onFileChanged(event) {
  const files = event.target.files;
  if (!files || files.length === 0) return; // 增加空判断，避免无文件时出错

  uploaded_file.value = files[0];
  const reader = new FileReader();

  // 监听读取完成事件，获取文本内容
  reader.onload = function(e) {
    const text = e.target.result;
    console.log('读取到的文本：', text);
    // 解析JSON恢复对象
    try {
      const restoredObject = JSON.parse(text);
      console.log('恢复的对象：', restoredObject);
      // 这里可以添加后续的对象恢复逻辑
    } catch (err) {
      console.error('JSON解析失败：', err);
    }
  };

  // 监听读取错误事件
  reader.onerror = function(e) {
    console.error('文件读取错误：', e.target.error);
  };

  // 传入实际的File实例（ref的value）
  reader.readAsText(uploaded_file.value);
}
</script>

额外优化建议 #

• 保存文件的代码可以简化，直接用Blob生成下载链接，同时改用更规范的application/json类型：

function saveToFile(model) {
  const data = JSON.stringify(model, null, 2); // 加缩进让JSON更易读
  const blob = new Blob([data], { type: 'application/json' });
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = URL.createObjectURL(blob);
  link.download = 'object-backup.json'; // 用.json后缀更明确
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href);
  link.parentNode.removeChild(link);
}

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