4

Nuxt.js I searched lots of tutorials for CSV uploading using laravel API but I did not get logic on how to code csv uploading things help me to solve this or give tutorial links.

Modules

   import { AxiosResponse } from "axios";
   import { axios } from "@/plugins/axios";
   
   export default {
     async importVsim(params: any): Promise<AxiosResponse<null>> {
       return await <AxiosResponse>axios.post('v1/ucl/import',params);
     }
   }

Components

<template>
    <div style="display:inline; text-align:left;">
      <b-button icon-left="upload" @click="open">UCL CSV</b-button>
      <b-modal
          v-model="showModal"
          trap-focus
          aria-role="dialog"
          aria-label="Example Modal"
          :width="600"
          aria-modal>
             <div class="card mb-4">
              <header class="card-header">
                <p class="card-header-title">UCL CSV</p>
              </header>
              <div class="card-content">
                <b-field label="mnk_*.csv">
                  <b-upload v-model="file1" class="file-label">
                    <span class="file-cta">
                        <b-icon class="file-icon" icon="upload"></b-icon>
                        <span class="file-label">Click to upload</span>
                    </span>
                    <span class="file-name" v-if="file1">
                        {{ file1.name }}
                    </span>
                  </b-upload>
                </b-field>
                <b-field label="htk_*.csv">
                  <b-upload v-model="file2" class="file-label">
                    <span class="file-cta">
                        <b-icon class="file-icon" icon="upload"></b-icon>
                        <span class="file-label">Click to upload</span>
                    </span>
                    <span class="file-name" v-if="file2">
                        {{ file2.name }}
                    </span>
                  </b-upload>
                </b-field>
                <div style="text-align:center;">
                  <b-button @click="close" :loading="loading">cancel</b-button>
                  <b-button class="is-primary" @click="upload" :loading="loading">Ok</b-button>
                </div>
              </div>
            </div>
        </b-modal>
    </div>
    
    </template>
    <script lang="ts">
    import { Component, Vue } from "nuxt-property-decorator"
    import importCsv from "@/modules/importCsv"
    
    @Component({})
    export default class extends Vue {
      file1: any = null
      file2: any = null
      loading: boolean = false
      showModal: boolean = false
      errors: any = {}
    
      async upload() {
        const response = await importCsv.importVsim(this.file2)
        console.log(response)
      }
    
      open() {
        this.errors = {}
        this.showModal = true
      }
    
      close() {
        this.showModal = false
      }
    }
    </script> 
Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
errors
  • 53
  • 4

0 Answers0