使用FileReader读取JSON文件？

Question

我正在尝试读取用户上传的JSON文件，并将其复制到数组中。然而，使用 .readAsText() 后，我得到的返回值具有字符串格式（明显），例如包括 "\" 和 \n 等类似字符串的属性。

是否有一种方法可以使用FileReader（或任何其他形式的读取文件，不涉及服务器）来读取JSON文件并仅返回纯JSON？

例如，让它返回

[
  {"hello": "world"}
]

或者

[{"hello": "world"}]

而不是

"[\n{\"hello\": \"world\"}\n]"

编辑：我现在知道JSON.parse(text)方法，但当解析FileReader对象时出现错误

 let fileUploaded = new FileReader();
 fileUploaded.readAsText(MY_JSON_FILE);
 console.log(JSON.parse(fileUploaded));

它返回错误error TS2345：类型为'FileReader'的参数无法赋值给类型为'string'的参数

我能否将使用FileReader读取的内容赋给另一个字符串变量，然后解析该新变量？

- José M.

---

您的意思是要将JSON字符串自动解码为JavaScript对象吗？ - Álvaro González

可能是 Safely turning a JSON string into an object 的重复问题。 - Reinstate Monica Cellio

根据我上面评论中的链接，你需要使用JSON.parse(text);将其转换为对象。 - Reinstate Monica Cellio

@Archer 我之前不知道JSON.parse，它似乎接近解决方案，但我遇到了错误，无法解析FileReader对象...有没有办法将信息传递给另一个对象来保存字符串，然后解析该对象？ - José M.

JSON是一种字符串格式。你所说的“解析FileReader对象”是什么意思？你能在问题中包含使用FileReader的HTML和JavaScript代码吗？请参阅https://stackoverflow.com/help/mcve。 - guest271314

@guest271314 我已经更新了问题。希望它能更好地解释我的问题。 - José M.

Answer 1

该问题中的代码错误地使用了FileReader。 FileReader .readAs<Type>操作是异步的。 FileReader具有load和loadend事件，在这些事件中，event.target和FileReader实例的result属性是异步处理的结果数据。 不要解析FileReader对象本身。 .readAs<Type>期望将Blob作为参数传递，而不是JavaScript普通对象。

const MY_JSON_FILE = [{
  "hello": "world"
}];

let json = JSON.stringify(MY_JSON_FILE);

const blob = new Blob([json], {type:"application/json"});

const fr = new FileReader();

fr.addEventListener("load", e => {
  console.log(e.target.result, JSON.parse(fr.result))
});

fr.readAsText(blob);

- guest271314

---

这很有道理，看起来是正确的答案，但我收到一个错误，说“在类型'EventTarget'上不存在属性'result'”，在console.log和使用.result的地方... 你有什么想法吗？ - José M.

我似乎无法......错误可能在我的一方，我会仔细检查它。我对这一切还有点陌生，所以抱歉没有表达得更清楚！ - José M.

@JoséM，请参见HTML5文件API中的FileReader.readAsText如何工作？。 - guest271314

只是简单地记录一下，好像老旧的IT解决方法“关闭并重新启动”似乎“修复”了发生的任何错误。现在它可以正常工作了！再次感谢您！ - José M.