Laravel + vue js как отправить изображение на сервер?

Question

[Александр Шведов]

<template>
  <div class="row">
    <div class="col-md-8 m-auto">
      <b-form v-if="show" enctype="multipart/form-data">
        <b-form-group id="input-group-2" label="Имя книги" label-for="book-name">
          <b-form-input
            id="book-name"
            v-model="form.name"
            required
            placeholder="В ведите имя"
          />
        </b-form-group>

        <b-form-group
          id="input-group-1"
          label="Описание"
          label-for="description"
          description="We'll never share your email with anyone else."
        >
          <b-form-input
            id="description"
            v-model="form.description"
            type="text"
            required
            placeholder="В ведите описание"
          />
        </b-form-group>

        <b-form-group id="input-group-3" label="Возрастное ограничение:" label-for="pegi">
          <b-form-select
            id="pegi"
            v-model="form.pegi"
            :options="pegi"
            required
          />
        </b-form-group>

        <b-form-group id="input-group-2" label="Количество страниц" label-for="book-page">
          <b-form-input
            id="book-page"
            v-model="form.page_extent"
            type="number"
            required
            placeholder="Количество страниц"
          />
        </b-form-group>

        <b-form-group id="input-group-2" label="Дата издания" label-for="book-page">
          <b-form-input
            id="book-page"
            v-model="form.data_release"
            type="number"
            required
            placeholder="Дата издания"
          />
        </b-form-group>
        <b-form-group id="input-group-2" label="" label-for="checkbox-2">
          <b-form-checkbox
            id="checkbox-1"
            v-model="ISBN"
            name="checkbox-2"
            value="true"
            unchecked-value="false"
          >
            ISBN
          </b-form-checkbox>

          <b-form-input v-show="ISBN"
                        id="book-ISBN"
                        v-model="form.ISBN"
                        placeholder="В ведите ISBN"
          />
        </b-form-group>

        <b-form-group id="input-group-3" label="Язык книги:" label-for="lang">
          <b-form-select
            id="lang"
            v-model="form.language"
            :options="language"
            required
          />
        </b-form-group>
        <div class="form-group">
          <div class="custom-file">
            <input id="customFile"
                   type="file"
                   class="custom-file-input"
                   @change="onAttachmentChange"
            >
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
        </div>
        <b-button type="button" variant="primary" @click="createBook">
          Submit
        </b-button>
        <b-button type="reset" variant="danger">
          Reset
        </b-button>
      </b-form>
    </div>
    <div class="col-md-4 m-auto">
      <b-card class="mt-3" header="Form Data Result">
        <pre class="m-0">{{ form }}</pre>
      </b-card>
    </div>
  </div>
</template>

<script>
import Form from 'vform'
import axios from 'axios'
export default {
  middleware: 'auth',
  name: 'BookCreate',
  metaInfo () {
    return { title: this.$t('register') }
  },
  data: () => ({
    form: new Form({
      name: '',
      description: '',
      page_extent: '',
      data_release: '',
      pegi: '',
      ISBN: '',
      language: '',
      image: null
    }),
    show: true,
    pegi: [0, 2, 4, 6, 12, 14, 16, 18],
    ISBN: false,
    language: ['rus', 'eng']
  }),
  methods: {
    async createBook () {
      axios.post('/api/book', this.form, {
        'Content-Type': 'multipart/form-data'
      })
        .then(response => console.log(response))
        .catch(error => console.log(error))
    },
    onAttachmentChange (e) {
      this.form.image = e.target.files[0]
    }
  }

}
</script>

<style scoped>

</style>

Сервер показывает что изображение до него не доходить но Vue показывает что в поле data form.image есть файл может кто то показать как можно отправить на сервер изображение застрял на этом при чистом ларавел я добавлял тип мульти форма и все было ок. тут сложнее Благодарен за любую помощь

Comments

[Александр Шведов]

bltr, да все приходит на laravel кроме изображения он null я подозреваю что я неправильно использую отправку изображения

Answer 1

[Александр Шведов]

отправка изображения возможна только FormData если использовать npm vform то изображение не дойдет до сервера

Answer 2

[imp-1903]

Попробуйте так:

let formData = new FormData();

formData.append('file', this.example.path.to.my.file)
axios.post('path/to/laravel', formData, {
 'headers': {
    'Content-Type': 'multipart/form-data'
  }
}).then((response) => {
  // do somethink
}).catch((error) => {
  // do somethink
})

Если надо рядом с картинкой добавить ещё полей, чтобы получилось, что мы отправляем не это ...

{
  file: "binary"
}

... а это ...

{
  file: "binary",
  name: 'Ivan',
  surname: 'Ivanov'
}

... , то используйте такой код:

let formData = new FormData();

formData.append('file', this.my.file);
formData.append('name', 'Ivan');
formData.append('surname', 'Ivanov');

axios.post('my/server', formData, {
  'headers': {
...