如何从 vuejs 中的 Windows 文件资源管理器访问任何 .json答案

【问题标题】：How to access any .json from windows file explorer in vuejs如何从 vuejs 中的 Windows 文件资源管理器访问任何 .json
【发布时间】：2020-11-30 02:06:48
【问题描述】：

我查找了如何访问 .json 文件而不将其保存到我的代码库但无法找到它 - 所有帖子都像这样：How to acces external json file objects in vue.js app 他们假设我可以将 .json 文件保存在代码库中，如下所示：import json from './json/data.json' - 他们将其称为json，它位于名为data.json 的文件中的json 文件夹中。

在我的情况下，相反，当用户尝试读取保存在其 Windows 文件资源管理器的“下载”文件夹中的自己的 .json 文件时，可能有一个或多个文件，用户将选择其中任何一个供网站访问和阅读。

我作为开发人员不拥有用户将选择的文件，不知道用户将选择哪个文件，因此不知道文件名或文件内容，所以我不能将该文件保存在代码库中。

我有没有办法让用户选择他们想要的任何 .json 文件，是否可以访问和阅读？谢谢。

更新：根据评论部分的建议，fileSelector 在开发工具中显示为 null

<input type="file" id="file-selector" accept="application/JSON" multiple>
interface HTMLInputEvent extends Event {
  target: HTMLInputElement & EventTarget;
}
mounted() {
    const fileSelector = document.getElementById('file-selector');
    fileSelector.addEventListener('change', (event: HTMLInputEvent) => {
      let files: any = event.target.files[0];
      const fileList = event.target.files;
      console.log(fileList);
    });
}

【问题讨论】：

this 回答你的问题了吗？
我想你读过这个页面，这就是你链接中的解决方案所建议的：web.dev/read-files/#select-input当我输入this.fileSelector.addEventListener('change', (event) => {const fileList = event.target.files; });时，它给了我一个错误Property 'files' does not exist on type 'EventTarget'.我该如何解决这个问题？
如果我理解这个问题，您可以简单地添加一个具有适当接受的文件类型的输入字段：<input type="file" id="myfile" name="myfile" accept="application/JSON">
@NathanBell 如果附加到文件输入，代码应该可以正常工作。你确定this.fileSelector是一个HTML文件输入吗？
您附加的图像看起来不像您选择的输入正确。将其作为const 变量移到mounted 挂钩内，然后它应该可以工作

标签： json vue.js

【解决方案1】：

显然您使用的是 Typescript，所以您的错误是在运行时还是在构建时？事件参数的类型对我来说似乎不正确，请尝试：

fileSelector.addEventListener('change', (event: Event) => {
  const files = (e.target as HTMLInputElement).files
})

【讨论】：