Laravel + vue js how to send image to server?

Question

Vue.js

<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>

The server shows that the image does not reach it, but Vue shows that there is a file in the data form.image field, can someone show how you can send the image to the server, I got stuck on this with pure Laravel, I added the multi form type and everything was ok. it's harder here Thanks for any help

Answer 1

sending an image is possible only FormData if you use npm vform then the image will not reach the server

Answer 2

Try like this:

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
})

If you need to add more fields next to the picture, so that it turns out that we are not sending this ...

{
  file: "binary"
}

... and this ...

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

... then use this code:

let formData = new FormData();

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

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