VueJS CSV文件阅读器

Question

在使用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);
        }

    }
})

Answer 1

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

您通常可以通过放置监视或使用处理程序抛出本地事件来处理此fileInput问题。vm.$emitonload