vue传参时候设置请求头参数

(1)axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
传参格式为 formData==>

var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
 
axios.post("/notice",formData)
     .then((res) => {return res})
     .catch((err) => {return err})

(2)axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
传参格式为 query 形式,使用$qs.stringify

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

(3) axios.defaults.headers.post['Content-Type']= 'application/json;charset=utf-8'
传参格式为 raw (JSON格式)(常用)

let user= {
                        id:'123',
                        name:'七七七',
                        sex:'男',
                        age:19,
                        school:'攀大'
                    };
                axios({
                        url:'http://localhost:8081/addUser',
                        method:'post',
                        data:JSON.stringify(user),
                    }).then(
                    (response)=>
                    {
                        console.log(response.data)
                    },
                    (error)=>
                    {
                        console.log(error.message)
                    }

后台(接收的是一个对象)为:

@GetMapping
    @RequestMapping(path = "/addUser")
    public String addUser(@RequestBody Test t)
    {
        System.out.println(t.getId());
        return "增加成功";
    }

在使用Vue传递multipart/form-data参数时,可能会遇到无法传递的问题。其中一个可能的原因是未正确设置表单的enctype属性。即便是使用Vue,也需要确保表单是正确设置的。 enctype属性告诉浏览器表单数据应该如何编码。当表单包括二进制数据(如图片或文件)时,必须设置为multipart/form-data。但是,Vue默认情况下不会自动将enctype设置为multipart/form-data。因此,需要手动设置表单的enctype属性为multipart/form-data。 设置表单的enctype属性有两种方法。第一种方法是在HTML代码中手动设置表单的enctype属性。例如: <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> 第二种方法是在Vue组件中使用v-bind指令设置表单的enctype属性。例如: <template> <form action="/upload" method="post" :enctype="'multipart/form-data'"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> </template> 在第二种方法中,v-bind指令允许您绑定一个表达式到Vue组件中的HTML属性。在这种情况下,使用v-bind指令将enctype属性设置为multipart/form-data。这将确保浏览器正确地处理表单数据,并将二进制数据正常提交到服务器。 总之,要在Vue中成功传递multipart/form-data参数,您需要确保正确设置表单的enctype属性。此外,记得确保你的服务器端对multipart/form-data请求有正确的处理方式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值