拉维尔 Vue.js API : axios' PUT method doesn't send any data to controller

Question

我正在尝试使用 Laravel 和 Vue.js 中的 API 更新模型中的一些数据但我不能这样做，因为 axios 不向服务器发送任何数据，我在发送前检查数据并且它们存在(我使用 FormData.append 添加所有字段)

我在使用代码发送前检查数据:

for(var pair of formData.entries()) {
   console.log(pair[0]+ ': '+ pair[1]); 
} 

我得到了这个结果:

您可以检查相应的代码:[更新功能] 更新启动(){

            let formData = new FormData();
            formData.append('startup_logo', this.update_startup.startup_logo);
            formData.append('country_id', this.update_startup.country_id);
            formData.append('category_id', this.update_startup.category_id);
            formData.append('startup_name', this.update_startup.startup_name);
            formData.append('startup_url', this.update_startup.startup_url);
            formData.append('startup_bg_color', this.update_startup.startup_bg_color);
            formData.append('startup_description', this.update_startup.startup_description);
            formData.append('startup_public', this.update_startup.startup_public);

            axios.put('/api/startup/' + this.update_startup.id, formData, { headers: {
                    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
                }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error.response);
                });

        }

[我应该接收数据的 Controller 方法]:

 public function update(Request $request, $id) {

    return $request; // just for checking if I get data
    ...
 }

[带有 vue.js 的 HTML，其中我使用我在 updateStartup 函数中发送的对象]:

<!-- Modal edit -->
    <div class="modal fade editStartUp" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <img src="/admin/images/modal-cross.png" alt="Close">
                    </button>
                </div>
                <div class="modal-body">

                    <form method="POST" enctype="multipart/form-data" @submit.prevent="updateStartup">
                        <h4 class="sel-c-t">Select category</h4>

                        <div class="submit-fields-wr">
                            <select name="category" v-model="update_startup.category_id" class="selectpicker select-small" data-live-search="true" @change="updateCategoryDetails()">
                                <option v-for="category in categories" :value="category.id" :selected="category.id == update_startup.category_id ? 'selected' : ''" >{{ category.name }}</option>
                            </select>

                            <select v-if="update_startup.is_admin" name="country" v-model="update_startup.country_id" class="selectpicker select-small" data-live-search="true" @change="updateCountryDetails()">
                                <option v-for="country in countries" :value="country.id" :selected="country.id == update_startup.country_id ? 'selected' : '' ">{{country.name }}</option>
                            </select>
                        </div>

                        <div class="submit-fields-wr">
                            <input type="text" placeholder="Startup name" v-model="update_startup.startup_name">
                            <input type="url" v-model="update_startup.startup_url" placeholder="URL">
                        </div>

                        <textarea v-model="update_startup.startup_description" name="startup_description" placeholder="Describe your startup in a sentence.">

                        </textarea>

                        <div v-if="!update_startup.is_admin">
                            <h4 class="sel-c-t bold">Contact details:</h4>

                            <div class="submit-fields-wr">
                                <select name="country" v-model="update_startup.country_id" class="selectpicker select-small" data-live-search="true" @change="updateCountryDetails()">
                                    <option v-for="country in countries" :value="country.id" :selected="country.id == update_startup.country_id ? 'selected' : '' ">{{country.name }}</option>
                                </select>
                                <input type="text" placeholder="Your Name" v-model="update_startup.contact_name">
                            </div>

                            <div class="submit-fields-wr">
                                <input type="text" v-model="update_startup.contact_phone" placeholder="Your phone number">
                                <input type="email" v-model="update_startup.contact_email" placeholder="Your email address">
                            </div>
                        </div>


                        <p class="upl-txt">Company’s logo.<span>(upload as a png file, less than 3mb)</span></p>

                        <div class="file-upload">
                            <div class="logo-preview-wr">
                                <div class="img-logo-preview">
                                    <img :src="update_startup.startup_logo" alt="logo preview" id="img_preview">
                                </div>
                            </div>

                            <label for="upload" class="file-upload_label">Browse</label>
                            <input id="upload" @change="onFileUpdated" class="file-upload_input" type="file" name="file-upload">
                        </div>

                        <div class="preview-divider"></div>

                        <h4 class="sel-c-t bold">Preview:</h4>

                        <div class="preview-wrapper-row">

                            <a href="#" class="start-up-wr">
                                <div class="start-up-part-1 edit">
                                    <div class="flag-cat-wr">
                                        <div class="flag-wr">
                                            <img :src="update_startup.country_flag" :alt="update_startup.country_name">
                                        </div>
                                        <div class="category-wr">
                                            {{ update_startup.category_name }}
                                        </div>
                                    </div>
                                    <img :src="update_startup.startup_logo" :alt="update_startup.startup_name" class="start-up-logo">
                                </div>
                                <div class="start-up-part-2">
                                    <h4 class="startup-name">{{ update_startup.startup_name }}</h4>
                                    <p class="startup-description">
                                        {{ update_startup.startup_description }}
                                    </p>
                                </div>
                            </a>

                            <div class="color-picker-btns-wr">

                                <div>
                                    <input type="text" class="color_picker" v-model="update_startup.startup_bg_color">
                                    <button class="colo_picker_btn">Background Color</button>
                                </div>

                                <div class="modal-bottom-btns">
                                    <div class="btn-deactivate-active">
                                        <button type="submit" class="btn-deactivate" @click="deactivateExistingStartup()">Deactivate</button>
                                        <button type="submit" class="btn-activate" @click="activateExistingStartup()">Activate</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- Modal edit -->

[附加信息 - 当我打开模式时(我有更新的表格)我根据启动 ID 相应地更改表格数据]:

showUpdateStartup(startup) {

            setTimeout(() => {
                $('.selectpicker').selectpicker('refresh');
            }, 50);

            this.update_startup.id = startup.id;
            this.update_startup.category_id = startup.category.id;
            this.update_startup.category_name = startup.category.name;
            this.update_startup.startup_name = startup.name;
            this.update_startup.startup_description = startup.description;
            this.update_startup.startup_url = startup.url;
            this.update_startup.startup_logo = startup.logo;
            this.update_startup.startup_bg_color = startup.startup_bg_color;
            this.update_startup.contact_id = startup.contact.id;
            this.update_startup.contact_name = startup.contact.name;
            this.update_startup.contact_phone = startup.contact.phone;
            this.update_startup.contact_email = startup.contact.email;
            this.update_startup.country_id = startup.contact.country.id;
            this.update_startup.country_flag = startup.contact.country.flag;
            this.update_startup.country_name = startup.contact.country.name;
            this.update_startup.is_admin = startup.contact.is_admin;
            this.update_startup.startup_public = startup.public;
        },

如果您有任何其他问题，请告诉我

非常感谢你们的帮助和想法!

Answer 1

尝试将 formData.append('_method', 'PATCH') 与 axios.post 方法一起使用。