如何使用 Vuejs 和 vuetify 在 Laravel 中将文件与数据一起上传答案

【问题标题】：How to upload files alongside data in Laravel with Vuejs and vuetify如何使用 Vuejs 和 vuetify 在 Laravel 中将文件与数据一起上传
【发布时间】：2020-03-29 12:33:23
【问题描述】：

我有一个使用 Vuetify 的表单，它接收文本和几张图像。如果我不包含图像，则该表单有效，但使用它们，我会收到错误 GET http://danza.test/thumbnails[object%20File] 404 (Not Found)。

如何在表单中与侧边文本一起传递图像？

部分表单处理输入：

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

项目对象

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

上传功能

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

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

要使用 axios 上传文件，请使用 FormData 对象，将文件附加到 FormData 对象，然后通过 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);
                        });
                }

查看File Upload using vuetify 2 v-file-input and axios

【讨论】：