Почему мой запрос формы laravel jetstream vue выдает значение null

#database #laravel #vue.js #jetstream

#База данных #laravel #vue.js #jetstream

Вопрос:

Я работаю над проектом laravel jetstream, в котором я хочу иметь возможность импортировать файл Excel, который будет помещен в базу данных. Проблема сейчас в том, что в моем контроллере $request-> all(); дает мне ответ null

Контроллер:

     {

        dd($request->all());
        // $validator = Validator::make($request->all(), [
        //     'file'  => 'required|max:50000'
        // ]);

        // if ($validator->passes()) {
        //     $dataTime = date('Ymd_His');
        //     $file = $request->file('file');
        //     $fileName =  $dataTime .  '-' . $file->getClientOriginalName();
        //     $savePath = public_path('/upload/');

        //     $file->move($savePath, $fileName);

        //     dd($file);

        //     return Inertia::render('Import/Show')->with(['success' => 'Bestand Succesvol opgeslagen.']);
        // } else {
        //     dd($validator->errors()->all());
        //     return Inertia::render('Import/Show')->with(['errors' => $validator->errors()->all()]);
        // }
    }
  

Компонент Vue

 <template>
  <app-layout>
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Import</h2>
    </template>

    <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
      <form
        @submit.prevent="submit"
        method="post"
        enctype="multipart/form-data"
      >
        <jet-label for="file" value="Kies Excel bestand om te uploaden!" />
        <input type="file" id="file" v-on:change="onFileChange" />
        <br />
        <jet-button> Verstuur </jet-button>
      </form>
    </div>
  </app-layout>
</template>

<script>
import AppLayout from "./../../Layouts/AppLayout";
import JetButton from "./../../Jetstream/Button";
import JetInput from "./../../Jetstream/Input";
import JetLabel from "./../../Jetstream/Label";
import JetFormSection from "./../../Jetstream/FormSection";

export default {
  components: {
    AppLayout,
    JetButton,
    JetInput,
    JetFormSection,
    JetLabel,
  },

  data() {
    return {
      file: "",
    };
  },

  methods: {
    onFileChange(e) {
      console.log(e.target.files[0]);

      this.file = e.target.files[0];
    },
    submit() {
      console.log(this.file);
      this.$inertia.post(route("import.process", this.file));
    },
  },
};
</script>
  

я хотел бы знать, что я делаю не так, потому что прямо сейчас я не могу продолжать работать над фактическим размещением содержимого в моей базе данных.

Ответ №1:

Вы должны изменить свои данные ()

 data() {
        return {
            form: this.$inertia.form({
                file: '',
            }),
        }
    },
  

а затем вызовите сообщение таким образом

 this.form.post(route('import.process'), {
   //your logic
});