如何使用 vue-papa-parse 将本地 csv 文件导入 vue？

Question

我有一个 vue 项目，我想在其中选择一个本地 .csv 并将内容导入到一个变量中。我正在尝试通过 vue-papa-parse 来实现，我已经通过 npm 安装了它。下面的代码（main.js，然后是一个 vue 组件）在浏览器中选择一个文件，但之后什么都不做。控制台中唯一的提示是 ma-map.vue:33（console.log 行）处的“欠定义”。

papa parse 文档提到配置对象应该包括一个回调，我没有（也不知道如何）。

我并不认同 papa parse 的想法，但它似乎得到了很好的评价。反馈表示赞赏。

“main.js”文件：

import Vue from 'vue'
import VuePapaParse from 'vue-papa-parse'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
import VueRouter from 'vue-router'
import PouchDB from 'pouchdb-browser'
import App from './App.vue'
import {
  routes
} from './routes'

Vue.config.productionTip = false

Vue.component('v-select', vSelect)
Vue.use(VuePapaParse)
Vue.use(VueRouter)
  ...

<!-- Vue Component file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
  < template >
    <
    div >
    <
    h3 > Import csv < /h3> <
  br / >
    <
    br / >
    <
    input type = "file"
  @change = "readFile" / > <!-- implicit event should return FileList -->
    <
    /div> < /
    template >

    <
    script >
    export default {
      data: function() {
        return {
          config: /* Papa Parse config object */ {
            delimiter: "", // auto-detect
            newline: "", // auto-detect
            quoteChar: '"',
            escapeChar: '"',
            header: true,
            dynamicTyping: true,
            preview: 0,
            encoding: "",
            delimitersToGuess: [',', '\t', '|', ';']
            // ?? callback function ??
          }
        }
      },
      methods: {
        readFile() {
          var fileToParse = event.target.files[0] /* returns first object in FileList */
          this.parsedFile = this.$papa.parse(fileToParse, this.config); /* from similar syntax in https://www.npmjs.com/package/vue-papa-parse#parse-local-files */
          console.log(this.parsedFile);
        }
      }
    };
</script>

Answer 1

我找到了我的答案，确实在需要作为papa.parse 函数中的配置选项传递的回调函数中。

以下在 Vue.js 环境中工作并正确输出 csv 文件的内容。papa.parse 行使用 vue-papa-parse 包装器语法，选项 'header: true' 和 'complete: function...' 根据 papa.parse 文档。

<script>
export default {
    data: function () {
        return {
            availability: {}
        }
    },
    methods: {
        readFile() {
            /* return first object in FileList */
            var file = event.target.files[0];
            this.$papa.parse(file, {
                header: true,
                complete: function (results) {
                    this.availability = results.data;
                    console.log(this.availability);
                }
            });
        }
    }
}

Answer 2

我有同样的问题，我用上面的代码，但我不能动态地更新我的vue data例如this.availability是undefined内部的complete config。

我通过创建另一个解决了它method并将其放置complete为回调。现在，我可以将数据传递给this.availability并更新一些UI.

<script>
export default {
data: function () {
    return {
        availability: {}
    }
},
methods: {
    onComplete(results, file){
      // Your logic here! functions or axios calls
      this.availability = results;
      console.log(this.availability);
    },
    readFile() {
        /* return first object in FileList */
        var file = event.target.files[0];
        this.$papa.parse(file, {
            header: true,
            complete: this.onComplete // your vue methods
        });
    }
  }
}
</script>