How to upload files alongside data in Laravel with Vuejs and vuetify

Question

I have a form using Vuetify which takes in text and a couple of images. The form works if I don't include the images, but with them, I get the error GET http://danza.test/thumbnails[object%20File] 404 (Not Found).

How do I pass images across in a form along side text?

Part of form handling input:

<v-row>
   <v-col cols="12" sm="6" md="6">
   <v-file-input v-model="editedItem.image" label="Picture"></v-file-input>
  </v-col>
   <v-col cols="12" sm="6" md="6">
   <v-file-input v-model="editedItem.thumbnail" label="Thumbnail"></v-file-input>
  </v-col>
</v-row>

item object

editedItem: {
                name: '',
                image: null,
                thumbnail: null,
                species: '',
                tag: '',
                patreon: '',
                action: '',
            },
            defaultItem: {
                name: '',
                image: null,
                thumbnail: null,
                species: '',
                tag: '',
                patreon: '',
                action: '',
            },

upload function

saveToServer () {
                if (this.editedIndex > -1) {
                    // Edit item
                    Object.assign(this.images[this.editedIndex], this.editedItem);
                    axios.put('/api/gallery/' + this.images[this.editedIndex].id, this.editedItem).then((response) => {
                    })
                        .catch(function (error) {
                            console.log(error);
                        })
                } else {
                    //New item
                    let $updatedGallery = this;
                    let $index = this.images.push(this.editedItem)-1;
                    axios.post('/api/gallery', this.editedItem, {headers: {'Content-Type': 'multipart/form-data'}})
                        .then((response) => {
                        $updatedGallery.editedItem.id = response.data.id;
                        Object.assign($updatedGallery.images[$index], $updatedGallery.editedItem);
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

score 0 · Answer 1 · answered Dec 04 '19 at 17:13

To upload file with axios use FormData Object, append your file to FormData object then upload it through axios.

saveToServer () {
                if (this.editedIndex > -1) {
                    let formData = new FormData()
                    formData.append("file", editedItem.image)
                    axios.put('/api/gallery/', formData).then((response) => {
                    })
                        .catch(function (error) {
                            console.log(error);
                        })
                } else {
                    //New item
                    let $updatedGallery = this;
                    let $index = this.images.push(this.editedItem)-1;
                    let formData = new FormData()
                    formData.append("file", editedItem.image)
                    axios.post('/api/gallery', formaData)
                        .then((response) => {
                        $updatedGallery.editedItem.id = response.data.id;
                        Object.assign($updatedGallery.images[$index], $updatedGallery.editedItem);
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

check File Upload using vuetify 2 v-file-input and axios

How to upload files alongside data in Laravel with Vuejs and vuetify

1 Answers1