Javascript 如何在vue组件中使用Maatwebsite导入excel文件？

我已经这样做了，但在那个时候我使用了拉维刃和拉维集体来保存表单。现在我正在使用vue，这对我来说有点不同，而且对我来说太棘手了，因为我是vuejs的新手。我怎样才能做到这一点？我是否可以在vue组件中使用laravel collective，使我的工作变得简单？谢谢你的回答。这是我的密码

Vue组件

<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="exampleModalLabel">Import CSV</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                  <form @submit.prevent="importRoom()">
                <div class="modal-body">
                    <div class="form-group">
                      <label>Select CSV</label>
                      <input
                        v-on:change ="i dont have a method yet"
                        type="file"
                        name="template"
                        id="template"
                        class="form-control"
                        :class="{ 'is-invalid': form.errors.has('template') }"
                      />
                      <has-error :form="form" field="bldg"></has-error>
                    </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
                </form>
              </div>
            </div>
          </div>

控制器

 public function import(Request $request){
        if($request->hasFile('template')){
            $path = $request->file('template')->getRealPath();
            $data = \Excel::load($path)->get();

            if($data->count() > 0){
                $rows = $data->toArray();
                foreach ($rows as $row) {
                    $inserts[]=[
                        'room_desc' => $row['room_desc'],
                        'bldg' => $row['bldg'],
                    ];
                }
            }
            $chuncked = array_chunk($inserts, 10);
            if(empty($inserts)){
                dd('Request data does not have any files to import.');  
            }
            else {
                foreach($chuncked as $inserts){
                    \DB::table('rooms')->insert($inserts);
                 }
                dd('record inserted');  
            }
        }
    }

方法

  importRoom(){
            axios.post('/importRoom')
              .then(()=>{
                console.log('imported')
              })
          }

---

我的excel中只有两列要导入数据库。我真的是新的客户端，所以这对我来说很难。感谢您的帮助。

一旦更改，您必须在formData中上载excel工作表

getExcelData(e) {
    const formData = new FormData();
    const file = e.target.files[0];
    formData.append('file', file);
    axios.post('url', formData)
            .then(response => {
                //Code to play with api response with excel data
            })
            .catch(error => {
                //Catch errors
            });
}

---

您必须通过使用axios调用API来实现这一点。是的，我需要调用importRoom方法，对吗？但是一旦发生变化，我该怎么办呢？我的代码在vue中是否正确？我是否也应该调用methodos importRoom，先生？不需要，您应该在@change处调用getExcelData，表单呢？在我提交之后？你必须将响应数据存储在一些变量中，然后在提交时以表单形式传递它。先生，这是什么意思？对不起，我有点困惑

getExcelData(e) {
    const formData = new FormData();
    const file = e.target.files[0];
    formData.append('file', file);
    axios.post('url', formData)
            .then(response => {
                //Code to play with api response with excel data
            })
            .catch(error => {
                //Catch errors
            });
}