Javascript 如何在Vue中通过readfile从JSON文件获取数据？

我无法读取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>

从“Vue”导入Vue；
导出默认值{
数据（）{
返回{}；
},
方法：{
onFileChange（e）{
让files=e.target.files | | e.dataTransfer.files；
如果（！files.length）返回；
此.readFile（文件[0]）；
},
readFile（文件）{
let reader=new FileReader（）；
reader.onload=e=>{
this.readContentFile=e.target.result；
console.log（this.readFile）；
};
让url=reader.readAsDataURL（文件）；
让内容=reader.result；
console.log（url）；
控制台日志（内容）；
}
}
};

你差点就成功了。reader.onload类似于文件加载完成时的回调，因此底部附近的console.log将在文件加载之前发生。希望这段代码对您有所帮助

newvue({
el:“应用程序”，
方法：{
onFileChange（e）{
让files=e.target.files | | e.dataTransfer.files；
如果（！files.length）返回；
此.readFile（文件[0]）；
},
readFile（文件）{
let reader=new FileReader（）；
reader.onload=e=>{
console.log（如target.result）；
让json=json.parse（e.target.result）；
};
reader.readAsText（文件）；
}
}
});