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

Posted 2023-02-22

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

【英文标题】：how to import excel file in mysql using laravel 5.7 with vue JS

【发布时间】：2019-05-02 21:26:58

【问题描述】：

我正在为输入 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],
    ]);

【问题讨论】：

您究竟想如何在 mysql 中“存储”文件？文件可以存储在服务器上，MySQL 可以有该文件的路径。

是的，但我无法从 Excel 中检索数据，如果您知道如何检索，请帮助我..

sheetjs.com

【参考方案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)]);
          
      

【讨论】：

非常感谢您的回复，但我不明白为什么我们使用 v-model="datafileupload.result_file3" AND v-model="datafileupload.hasilcek3" 这两个东西...