VueJS

Question

在使用HTML5输入字段选择.csv文件之后，我正在尝试获取Html的输入。为此，我使用了一个onFileChange方法和一个FileReader()。下面是我使用的一个示例：http://codepen.io/Atinux/pen/qOvawK/ (只是我想读取文本输入，而不是图像文件)。

我的问题是，我在第一次尝试中得到了一个空输入，但是在第二次尝试中，它是有效的。为什么会这样呢？有什么想法吗？(我是javascript初学者;)

html：

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

联署材料：

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或使用来自onload处理程序的vm.$emit抛出本地事件来处理这一问题。

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

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

Answer 3

在这里您可以使用Promise函数处理异步代码

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) {
      let promise = new Promise((resolve, reject) => {
        var reader = new FileReader();
        var vm = this;
        reader.onload = e => {
          resolve((vm.fileinput = reader.result));
        };
        reader.readAsText(file);
      });

      promise.then(
        result => {
          /* handle a successful result */
          console.log(this.fileinput);
        },
        error => {
          /* handle an error */ 
          console.log(error);
        }
      );
    }
  }
});