时间戳

首页 > 解决方案 > vue上传本地json文件

json - vue上传本地json文件

问题描述

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

标签： jsonfilevue.jsimportvue-component

解决方案

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

做到这一点的方法是使用特殊<input type="file">的 和 a 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 应用程序中实现。

推荐阅读