如何通过 Vue 中的 readfile 从 JSON 文件中获取数据？答案

【问题标题】：How get data from JSON file by readfile in Vue?如何通过 Vue 中的 readfile 从 JSON 文件中获取数据？
【发布时间】：2020-06-17 02:36:20
【问题描述】：

我无法读取 JSON 文件内容，我试图通过 ReadFile 访问文件的内容，但没有成功，我的内容字符串为空，并且 url 未定义，

我的代码：

<template>
 <div class="large-12 medium-12 small-12 cell">
   <input type="file" accept="application/JSON" @change="onFileChange" class="inputFile" />
 </div>
</template>

<script>
import Vue from "vue";

export default {
 data() {
   return {};
 },
 methods: {
   onFileChange(e) {
     let files = e.target.files || e.dataTransfer.files;
     if (!files.length) return;
     this.readFile(files[0]);
   },
   readFile(file) {
     let reader = new FileReader();
     reader.onload = e => {
       this.readContentFile = e.target.result;
       console.log(this.readFile);
     };
     let url = reader.readAsDataURL(file);
     let content =reader.result;
     console.log(url);
     console.log(content);
   }
 }
};
</script>

【问题讨论】：

标签： javascript json vue.js readfile

【解决方案1】：

你几乎拥有它。 reader.onload 就像文件加载完成时的回调，因此底部附近的 console.logs 会在文件加载之前发生。希望这个 sn-p 对您有所帮助。

new Vue ({
 el: "#app",
 methods: {
   onFileChange(e) {
     let files = e.target.files || e.dataTransfer.files;
     if (!files.length) return;
     this.readFile(files[0]);
   },
   readFile(file) {
     let reader = new FileReader();
     reader.onload = e => {
       console.log(e.target.result);
       let json = JSON.parse(e.target.result);
     };
     reader.readAsText(file);
   }
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="large-12 medium-12 small-12 cell" id="app">
   <input type="file" accept="application/json" @change="onFileChange">
</div>

【讨论】：