VueJS 导入和解析 CSV（仅限前端）

Question

你能分享一个从客户端解析 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 的小费！！

Answer 1

糟糕的版本 .. 它自动使用最新版本 4（仅适用于 vue3 .. 对于 vue2，我必须使用 2.3.4 并且效果很好:)）

查看变更日志