Vue上传本地json文件

Question

我找不到我的问题的答案，我认为只有 Vue.js 才有可能，但我不是 100% 确定。所以问题是。我希望用户从他的计算机中选择文件，它总是 json 文件。可以获取该文件并仅使用 Vue.js 使用它，或者我需要一些后端。

Answer 1

这里没有任何特定于 Vue 的东西，也不需要服务器。

这样做的方法是使用特殊<input type="file">的FileReader().

document.getElementById('import').onclick = () => {
  const files = document.getElementById('selectFiles').files;
  if (files.length <= 0) {
    return false;
  }

  const fr = new FileReader();

  fr.onload = e => {
    const result = JSON.parse(e.target.result);
    const formatted = JSON.stringify(result, null, 2);
    document.getElementById('result').innerHTML = formatted;
  }
  fr.readAsText(files.item(0));
};

<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import The File!</button>
<pre id="result"></pre>

显然，这段代码可以很容易地在 Vue 应用程序中实现。