从 HTML 文件输入读取 JSON

Question

如果我有一个输入：

<input type="file" id="upload" onchange="getFile(this)">

我的用户将上传一个 JSON 文件（作为纯文本，所以我必须使用JSON.parse()），我如何获取该文件并通过实际获取数据getFile()

在 中getFile(element)，我尝试过使用element.files[0]，但似乎不包含实际数据。我也看过这里、这里和这里，但这些都不能解决我的问题。MDN 上的这个资源看起来很有前途，但我不太明白。

我想要一个涉及 或 的解决URL.createObjectURL()方案FileReader()。

另外，在任何人在评论中发布此内容之前，我确实了解这些解决方案并不适用于所有浏览器，我想从前端执行此操作。

Answer 1

您可以利用Response构造函数并调用.json()任何 blob/文件。

function getFile (elm) {
  new Response(elm.files[0]).json().then(json => {
    console.log(json)
  }, err => {
    // not json
  })
}

在 blob.prototype[...] 上使用新的读取方法的替代方法

new Blob(['1']).text().then(JSON.parse).then(console.log)
// handles emptying file input with ?.
elm.files[0]?.text().then(JSON.parse).then(console.log)

我想对于较大的文件，response.json 可能会更快/更好，因为它可以在后台解析内容，并且不会像 JSON.parse 那样阻塞主 UI