如何使用 laravel 5.7 和 vue JS 在 mysql 中导入 excel 文件

Question

我正在为输入 Excel 或 csv 文件 laravel 5.7 创建 vue 文件 我正在使用 Maatwebsite/Laravel-Excel 如果我第一次用 vue JS 制作像 laravel 这样的应用程序，不知道如何路由它 不知道怎么办 有Vue文件

    <template>
    <div class="container">
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Students</h3>

                <div class="card-tools">
                    <button class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Add New <i class="fas fa-user-plus"></i></button>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#importModel">Import <i class="fas fa-file-excel"></i></button>
                    <button class="btn btn-warning" data-toggle="modal" data-target="#export">Export <i class="fas fa-file-excel"></i></button>

                </div>
              </div>

            </div>
            <!-- /.card -->
          </div>
        </div><!-- /.row -->
        <!-- Modal -->
        <div class="modal fade" id="importModel" tabindex="-1" role="dialog" aria-labelledby="importModelLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importModelLabel">Import Excel</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST"   enctype="multipart/form-data">
                <div class="modal-body">
                        <div class="form-group">
                            <label>Import</label>
                            <input type="file" name="excel_file"
                                class="form-control" :class="{ 'is-invalid': form.errors.has('excel_file') }">
                        </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save Student</button>
                </div>
                </form>
            </div>
        </div>
        </div>

        <!--Exit Modal-->
    </div>
</template>

<script>
    export default {
        data(){
            return{
                form: new Form({
                    first_name:'',
                    last_name:'',
                    email:'',
                    password:'',
                    designation:''
                })
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

设置一个发布路径以在 web.php 文件中导入数据 这会将事情路由为 pr laravelExcel

Route::post('importExcel', 'API/StudentMasterController@import');

在控制器文件中

public function import()
{
    Excel::import(new StudentImport, request()->file('excel_file'));
      //return redirect('/')->with('success', 'All good!');
}

在 APP/import/studentmaster.php 文件中

public function model(array $row)
{
    return new Student_master([
        'EnrollmentNo'     => $row[22],
    ]);
}

Answer 1

这是 vue 视图和 js 我的代码：

<form method="POST" action="#" class="form-horizontal" @submit.prevent="createUpload" enctype="multipart/form-data">

              <div class="box-body">
                <div class="form-group row"><label for="name" class="col-sm-2 form-control-label">Parameter</label>
                  <div class="col-sm-10">
                  <input type="file" class="form-control" id="result_file" ref="myFiles" placeholder="Name Parameter" required="required" @change="previewFiles($event)">

                  <input type="hidden" name="result_file2" class="form-control" id="title" v-model="datafileupload.result_file3"  placeholder="Name Parameter" required="required">
                  <input type="hidden" name="hasilcek" class="form-control" id="hasilcek" v-model="datafileupload.hasilcek3"  placeholder="Name Parameter" required="required">

                  <input type="hidden" class="form-control" v-model="datapush.filename">
                  <input type="hidden" class="form-control" v-model="datapush.size">
                  </div><br><br><br>
                  <div v-if="this.hasilcekexcel > 0" class="alert alert-warning">File {{ namafile }}  exists , do you want to replace it ?</div>
              </div>
            </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @click="doSomethingOnHidden" >Close</button>
                <input type="submit" class="btn btn-primary"  id="submit_upload2" v-if="this.hasilcekexcel > 0" value="Replace">
                <input type="submit" class="btn btn-primary"  id="submit_upload" v-if="this.hasilcekexcel == 0" value="Upload">

              </div>
            </form>

js上传：

 createUpload () {
   var data = new FormData();
   var file = this.$refs.myFiles.files[0];
   var size = this.$refs.myFiles.files[0].size;

   data.append('filenya', file);
   data.append('namasifile', this.datafileupload.result_file3);
   data.append('angkacek', this.datafileupload.hasilcek3);


   axios.post('excelupload/upload', data)
     .then(response => {
     this.pesertas.push(response.data.data);
         this.showModal =false;

     });
  },

控制器：

 $excelupload = new Exceluploads;
      $hasilcek = $request->angkacek;
      $requestfile = $request->namasifile;
      if ($request->filenya != '') {
          $input = Input::all();
          $size = $request->file('filenya')->getClientSize();

          $file = array_get($input,'result_file');
          $userID = Auth::user()->id;
          $uploaded_by = Auth::user()->name;

          $destinationPath  = 'excel';

            // GET THE FILE EXTENSION

                $extension = 'xls';

            $fileName = $requestfile.'.'.$extension;
          if ($hasilcek > 0) {
              File::delete($destinationPath.'/'.$fileName);
              $upload_success = $request->filenya->move($destinationPath, $fileName);
                return response()->json(['data' => Exceluploads::find($excelupload->id)]);
          }else if ($hasilcek == 0) {
              $upload_success = $request->filenya->move($destinationPath, $fileName);
              $excelupload->filename = $fileName;
              $excelupload->directory = $destinationPath.'/'.$fileName;
              $excelupload->size = $size;
              //1 = not custome
              $excelupload->type = 1;
              $excelupload->uploaded_by = $uploaded_by;
              $excelupload->save();
              return response()->json(['data' => Exceluploads::find($excelupload->id)]);
          }
      }