gpt4 book ai didi

javascript - VueJS csv 文件阅读器

转载 作者:搜寻专家 更新时间:2023-10-30 22:13:00 25 4
gpt4 key购买 nike

在我使用 Html 5 输入字段选择 .csv 文件后,我正在尝试获取它的输入。因此,我使用 onFileChange 方法和 FileReader()。这是我使用的示例:http://codepen.io/Atinux/pen/qOvawK/ (除了我想读取文本输入,而不是图像文件)。

我的问题是,我在第一次尝试时得到一个空输入,但在第二次尝试时它起作用了。这是为什么?有任何想法吗? (我是一个 JavaScript 初学者 ;) )

html:

<form enctype="multipart/form-data">
<input type="file" @change="onFileChange">
</form>

js:

new Vue({
el: '#app',
data: {
fileinput: ''
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createInput(files[0]);
},
createInput(file) {
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {

vm.fileinput = reader.result;
}
reader.readAsText(file);

console.log(this.fileinput);
}

}
})

最佳答案

console.log 不显示任何内容的原因是 FileReader.readAsText() 是异步的。它在 console.log 执行后完成。

您通常可以通过在 fileInput 上放置一个 watch 或使用 onload 处理程序中的 vm.$emit 抛出一个本地事件来处理这个问题.

关于javascript - VueJS csv 文件阅读器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34498596/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com