请求 Axios 发布 vuejs：空数据答案

【问题标题】：Request Axios post vuejs : empty data请求 Axios 发布 vuejs：空数据
【发布时间】：2021-08-11 21:36:10
【问题描述】：

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

【问题讨论】：

您正在使用'Content-type': 'application/json'，但您正在发送formData。您可以尝试将您的内容类型更改为'Content-type': 'multipart/form-data'
我用 multipart / form-data 改变了，它不起作用。
这样它可以工作，但我的图像未定义` const fd = {nameOption : this.nameOption, imageUrlOption : this.imageUrlOption } axios.post(http://localhost:3000/api/option/create-option,fd,header) .then( (response) => { console.log(response) }).catch((err) => { console.log({err: err}) });
上述方法有效，因为您发送的是 JSON，但图像不是 JSON，因此未定义。你能告诉我你是如何在 Postman 上测试它的吗？你在 Postman 上也使用 application/json 吗？
非常感谢您的解释。我拍了两张截图，一张没有照片：姓名：邮递员，有图片，另一张有照片：姓名：邮递员，没有图片。图片可以在上面的帖子中找到。

标签： vue.js axios http-post

【解决方案1】：

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

【讨论】：

准确地填写了该字段。我收到了在控制台日志中输入的数据。这就是为什么我不明白问题出在哪里。例如，如果在查询参数中我只输入nameOption，它就可以工作。当我使用 formDatas 时它不起作用。
能否请您添加您发送的数据的屏幕截图。 console.log(formDatas)
我在帖子中添加了新的截图，名称为：nameOption，因为我不知道如何在评论中添加照片。
控制台 formDatas 发送前的样子
对不起，我不明白你的问题