не могли бы вы поделиться рабочим примером разбора CSV-файла с клиента?
Я вообще не могу найти рабочий пример...
Я играл с vue-papa-parser и vue-csv-import, но могу заставить его работать :(
Вот мой файл компонента (с использованием последнего пакета):
<template lang = "html">
<div class = "container">
<h1 class = "h2">CSV Upload</h1>
<div class = "dragndrop text-muted d-flex flex-column justify-content-center align-items-center border border-secondary">
<vue-csv-import
v-model = "csv"
:fields = "{name: {required: false, label: 'Name'}, age: {required: true, label: 'Age'}}"
>
<vue-csv-toggle-headers></vue-csv-toggle-headers>
<vue-csv-errors></vue-csv-errors>
<vue-csv-input></vue-csv-input>
<vue-csv-map :auto-match = "false"></vue-csv-map>
</vue-csv-import>
</div>
</div>
</template>
<script>
import { VueCsvImport } from 'vue-csv-import';
export default {
name: "CSVUpload",
components: {
VueCsvImport
},
data() {
return {
csv: null
}
},
methods: {
}
}
</script>
<style lang = "css" scoped>
.dragndrop {
background-color: #f5f5f5;
height: 50vh;
width: 80%;
margin: 2.5em auto;
}
</style>
но в консоли получаю следующее:
[Vue warn]: Error in render: "TypeError: Cannot read property 'VueCsvImportData' of undefined"
found in
---> <VueCsvImport>
<CallRecordUpload> at src/components/admin/Upload/Upload.vue
<Home> at src/components/Home.vue
<App> at src/App.vue
<Root>
и поэтому я даже не вижу ни одного INPUT TYPE="FILE" для загрузки... что-то не так с vue-csv-import :(
Есть предположения?
Обновлено: РЕШЕНО
Мне пришлось установить более низкую версию (v4 только для vue3!)
npm install vue-csv-import@2.3.4 --save
работает для меня отлично!
спасибо @marsnebulasoup за подсказку !!
Я изучаю это сейчас это сейчас
Я нашел демо, в котором используется vue-csv-import
, если хотите посмотреть: codeandbox.io/s/62x8plrwnk
хорошо @marsnebulasoup ... попробую :)
хорошо .... Теперь я знаю, в чем проблема ... когда я устанавливаю пакет, он дает мне версию ^ 4.0.1, а у них (в package.json) "vue-csv-import": "2.3.3"
... когда я пытался изменить их версию на 4.x.x не получилось... и не работает, когда пытаюсь вручную изменить версию пакета в package.json :(
Ага. Я видел это и пытался создать песочницу с этой версией, но у меня она почему-то не работает... должно быть, они используют какую-то темную магию, чтобы нормально работать 😑
Я заставил это работать .. нужно специально установить версию 2.3.4 .... кажется, она отлично работает :) спасибо, приятель, за коды и коробку .... это помогло !!
Без проблем. Рад, что у вас получилось!
плохая версия .. она автоматически использует последнюю версию 4 (которая предназначена только для vue3 .. для vue2 мне пришлось использовать 2.3.4, и это сработало отлично :))
смотрите журнал изменений
yarn add vue-csv-import@2.3.4
Кажется, эта версия не может автоматически сопоставлять поля
Я на самом деле сделал что-то подобное здесь. Вы можете проверить код, если хотите идей.