VueJS csv 文件阅读器

Question

我尝试获取 .csv 文件的输入，在我使用 Html 5 输入字段选择它之后。因此，我使用 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 上监视或使用 onload 处理程序中的 vm.$emit 引发本地事件来处理此问题。

Answer 2

在这里你可以使用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);
        }
      );
    }
  }
});

Answer 3

这里如果你想在promise 和define in data 之后单独的函数也可以试试下面的方法

    new Vue({
    el: "#app",
    data: {
        fileinput: ""
    },
    methods: {
        readFile: function(evt) {
            const scope = this
            var promiseVar = new Promise(async (resolve, reject) => {
                try {
                    var reader = new FileReader();
                    var file = evt.target.files[0];
                    reader.readAsText(file);
                    reader.onload = function(e) {
                        scope.fileinput = e.target.result
                        resolve('complete');
                    };
                } catch (error) {
                    console.error(error);
                    reject("There must be an error");
                }
            });
            // let updateds = await Promise.all(promiseVar);
            promiseVar.then(data=>{
                scope.afterRead();
            })
        },
        afterRead:function(){
            console.log(this.fileinput)
            // write your logic for import here
        }
    }
});

Answer 4

这是另一种方式

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

引用Creating a Vue.js File Reader Component Using the FileReader API

VueJS csv 文件阅读器

VueJS csv Filereader

javascript

vue.js