Vue3使用FileReader读取JSON文件报错：参数非Blob类型

问题场景 #

使用Vuetify的v-file-input组件导入JSON文件，尝试通过FileReader读取文件内容并解析为JSON对象，却触发以下错误：

Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

用户原代码如下：

<template>
<v-file-input accept=".json" v-model="selectedFile" label="Application's Data File"></v-file-input>
<v-btn class="my-3 ml-10" v-if="validated" @click="validate">Validate</v-btn>
</template>
<script setup>
const selectedFile = ref();
const validated = ref(true);
const validate = () => {
    const file = selectedFile instanceof FileList ? selectedFile[0] : selectedFile;
    if (file) {       
        const reader = new FileReader();
        reader.onload = (e) => {
            console.log(e.target.result);
            const content = e.target.result;
            try {
                const jsonObject = JSON.parse(content);
                console.log(jsonObject); // This is the parsed JSON object
            } catch (error) {
                console.log("Invalid JSON file:", error);
            }
        };
        reader.readAsText(selectedFile);
    }
};
</script>

错误原因 #

代码中已经正确判断并提取了file变量（处理了FileList的情况），但调用reader.readAsText()时错误传入了selectedFile——这是一个Vue响应式ref对象，而非实际的File/Blob类型，导致readAsText方法参数类型不匹配。

修正方案 #

将reader.readAsText(selectedFile)改为reader.readAsText(file)，同时添加逻辑展示JSON对象的键：

<template>
<v-file-input accept=".json" v-model="selectedFile" label="Application's Data File"></v-file-input>
<v-btn class="my-3 ml-10" v-if="selectedFile" @click="validate">Validate</v-btn>
<!-- 展示JSON对象的键 -->
<v-card v-if="jsonKeys.length">
  <v-card-title>JSON对象的键</v-card-title>
  <v-card-text>
    <ul>
      <li v-for="key in jsonKeys" :key="key">{{ key }}</li>
    </ul>
  </v-card-text>
</v-card>
</template>
<script setup>
import { ref } from 'vue';
const selectedFile = ref();
const jsonKeys = ref([]);

const validate = () => {
    // 单文件模式下，v-file-input的v-model直接绑定File对象
    const file = selectedFile.value;
    if (file) {       
        const reader = new FileReader();
        reader.onload = (e) => {
            const content = e.target.result;
            try {
                const jsonObject = JSON.parse(content);
                // 提取并存储JSON对象的键
                jsonKeys.value = Object.keys(jsonObject);
            } catch (error) {
                console.log("Invalid JSON file:", error);
                jsonKeys.value = [];
            }
        };
        // 传入正确的File对象
        reader.readAsText(file);
    }
};
</script>

额外说明：Vuetify的v-file-input默认是单文件选择模式，v-model绑定的直接是File对象；如果开启了multiple属性，才会返回FileList，此时需要遍历获取单个文件。

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