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

    }
})

原文由 ChrisS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您通常可以通过将手表放在 fileInput 或使用 vm.$emit 从 onload 处理程序中抛出本地事件来处理此问题

原文由 David K. Hess 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是另一种方式

        onFileChange: function(e) {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = e => console.log(e.target.result);
            reader.readAsText(file);
        },

参考 使用 FileReader API 创建 Vue.js 文件阅读器组件

原文由 kiatng 发布，翻译遵循 CC BY-SA 4.0 许可协议