代码之家  ›  专栏  ›  技术社区  ›  tony

请求Axios发布vuejs:空数据

  •  0
  • tony  · 技术社区  · 4 年前

    我在axios发布请求时遇到了问题,我总是按照以下步骤发送数据,它仍然有效,但今天不起作用。axios发送了空数据,但在控制台日志中我有数据。当我用邮递员测试时,一切正常,所以我认为问题出在查询级别。经过几次搜索,我发现我使用的方法很好,但为什么它不起作用。如果我只发送一个数据,它就起作用了。谢谢你的帮助

    <template>
        <div>
            <form class="form-CreateOption" method="post" v-on:submit.prevent="Submit">
                <div>
                    <p>Nom de l'option* </p>
                    <input type="text" name="nameOption" v-model="nameOption" id="nameOption">
                </div> 
                <div>
                    <p>Description*</p>
                    <textarea class="detailOption" name="descriptionOption" id="" cols="30" rows="10" v-model="descriptionOption"></textarea>
                </div>
                <div>
                    <p>Prix*</p>
                    <input type="text" name="priceOption" v-model="priceOption">
                </div>
                <div>
                    <p>Image*</p>
                    <input name="imageUrlOption" type="file" @change="uploadOneFileOption($event)">
                </div>
                <div>
                    <button type="submit">Create</button>
                </div>
            </form>
        </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
        name:'CreateOption',
        data(){
            return{           
                nameOption:"",
                descriptionOption: "",
                priceOption: "",
                imageUrlOption:""
            }
        },
        methods:{
            uploadOneFileOption(event){
                console.log(event)
                this.imageUrlOption = event.target.files[0];
            },
            Submit(){
                let token= localStorage.getItem('token')
                const header = {
                    headers: {
                        'Content-type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    }
                }
                const formDatas = new FormData();
                console.log(formDatas.append)
                formDatas.append('nameOption', this.nameOption)
                formDatas.append('descriptionOption', this.descriptionOption)
                console.log(this.descriptionOption)
                formDatas.append('priceOption', this.priceOption)
                console.log(this.nameOption)
                formDatas.append('imageUrlOption', this.imageUrlOption) 
           
                axios.post('http://localhost:3000/api/option/create-option',formDatas,header)
                .then((response) => {
                    console.log(response)
                }).catch((err) => {
                    console.log({err: err})
                });
            }
        }
    }
    </script>
    

    console.log

    nameOption

    FormData

    postman with image

    postman without image

    Backend

    1 回复  |  直到 4 年前
        1
  •  0
  •   Muhammad Bilal Bangash    4 年前

    enter image description here

    您发送的数据中有一个字段缺失或为空,这是必需的