vue从服务器获取csv文件,VueJS csv文件阅读器(VueJS csv Filereader)

I'm trying to get the input of a .csv File, after I choose it with my Html 5 input field. Therefor I use a onFileChange method and a FileReader(). Here is an example I used: http://codepen.io/Atinux/pen/qOvawK/ (except that I want to read the text input, and not an image file).

My Problem is, that I get an empty input on the first try, but on the second try it works. Why is that? Any ideas? (I'm a javascript beginner ;) )

html:

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);

}

}

})