Как импортировать локальный CSV-файл в vue, используя vue -papa-parse? - PullRequest
Новая
       53

Как импортировать локальный CSV-файл в vue, используя vue -papa-parse?

0 голосов
/ 24 февраля 2020

У меня есть проект vue, где я хочу выбрать локальный .csv и импортировать содержимое в переменную. Я пытаюсь сделать это через vue -papa-parse, который я установил через npm. Следующий код (main. js, затем компонент vue) выбирает файл в браузере, но после этого ничего не делает. Единственная подсказка в консоли - это недоопределение в ma-map. vue: 33 (строка console.log).

В документации по анализу папы упоминается, что объект конфигурации должен включать в себя обратный вызов, который я нет (и не знаю как).

Я не привыкла к идее разбора папы, но у нее, похоже, были хорошие отзывы. Обратная связь приветствуется.

Файл '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>

1 Ответ

0 голосов
/ 28 февраля 2020

Я нашел свой ответ, действительно, в функции обратного вызова, которую нужно передать в качестве опции конфигурации в функции 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);
                }
            });
        }
    }
}

...