Laravel не видит файл из bootstrap vue

Question

Приложение на vue и laravel. Использую bootstrap vue. на нем написал такой компонент формы

// < script >
import {
  mapActions
} from "vuex";

export default {
  name: "CreateBird",
  data() {
    return {
      form: {
        name: 'Tester',
        image: null,
      },
      error: false
    }
  },
  methods: {
    ...mapActions(['create']),
    async onSubmit() {
      console.log(this.form.image)
      this.error = !(await this.createBirds(this.form));
      console.log(this.error);
    }
    // < /script>

<!--<template>-->
<div class="p-3">
  <b-form @submit.prevent="onSubmit" enctype="multipart/form-data">
    <b-alert variant="danger" :show="error">Произошла какая-то ошибка</b-alert>

    <!--      NAME      -->
    <b-form-group id="input-name" label="Название птицы:" label-for="name">
      <b-form-input id="name" v-model="form.name" type="text" placeholder="" required minLength="3"></b-form-input>
    </b-form-group>

    <!--      IMAGE      -->
    <b-form-group id="input-image" label="Изображение птицы:" label-for="image">
      <b-form-file accept="image/jpeg, image/png, image/gif" v-model="form.image" :state="Boolean(form.image)" placeholder="Выберите файл или перетащите его сюда..." drop-placeholder="Перетащите файл сюда..."></b-form-file>
      <p class="mt-2">Selected file: <b>{{ form.image ? form.image.name : '' }}</b></p>
    </b-form-group>

    <b-button type="submit" variant="primary">Снести яйцо)</b-button>
    <b-button type="reset" variant="danger">Сбросить</b-button>
  </b-form>
  <b-card class="mt-3" header="Form Data Result">
    <pre class="m-0">{{ form }}</pre>
  </b-card>

</div>
<!--</template>-->

При событии onSubmit, в консоль выводится такая информация

На сервере такой код (laravel)

 public function store(BirdsRequest $request)
    {
        dd($request->hasFile('image')); // выводит false

        $params = $request->all();

        return Bird::create($params);
    }

Он выводит false. Вопрос - куда пропал файл ,который я загрузил

Answer 1

Проблема оказалась в axios. Нужно отправлять не просто объект, а formData. Плюс в axios нужно добавить заголовок multipart/form-data

let formData = new FormData();
for (let key in form) {
  formData.append(key, form[key]);
}

// set header to upload image file
return axios.post(
    'api/birds',
    formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  )
  .then(response => {
    console.log(response)
  })
  .catch((error) => {
    console.log(error.response);
  });

БЛОГ НА HUSL

Laravel не видит файл из bootstrap vue

Ответы (1 шт):