使用vue插件axios传数据的Content-Type及格式问题详解
更新时间：2022年09月16日 14:26:35 作者：东之健大坏蛋
这篇文章主要介绍了使用vue插件axios传数据的Content-Type以及格式问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1.一般来说，前后台对接，常用的Content-Type有：
application/json，application/x-www-form-urlencoded 以及 multipart/form-data，当我们使用axios时，一般不需要我们主动去设置Content-Type，而是跟着我们传的数据格式自动适应。
2.get请求
get请求时传递的参数是会出现在url里面的，我们使用aixos传递get请求时可用格式如下
（1）将参数拼接在url里
this.$axios({
method: 'get',
url: this.$store.state.api1
+ '&username=' + 'xxx'
+ '&password=' + 'xxx'
})
（2）将参数放入params对象里
this.$axios({
method: 'get',
url: this.$store.state.api1,
params: {
username: 'xxx',
password: 'xxx'
}
})3.post请求
（1）当我们要传对象时，此时的 Content-Type 为 application/json 类型，传递的格式如下，将传递的参数放入对象中：
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: {
username: 'xxx',
password: 'xxx'
}
})（2）当我们要传字符串时，Content-Type 为 application/x-www-form-urlencoded 类型，传递的格式有如下：
this.$axios({
method: 'post',
url: this.$store.state.api1,
data: 'username=' + 'xxx'
+ '&password=' + 'xxx'
})this.$axios({
method: 'post',
url: this.$store.state.api1,
data: qs.stringify({
username: 'xxx',
password: 'xxx'
})（3）当我们要传文件时，Content-Type 需要使用 multipart/form-data，格式如下：
// 获取文件
let input = document.querySelector('.input_file')
let curFiles = input.files
// 将文件放入formData中
let formData = new FormData()
for(let file of curFiles){
formData.append('files', file)
}
// 将需要传递的参数放入formData中
formData.append('username', 'xxx')
formData.append('password', 'xxx')
// 调接口
this.$axios({
url: this.$store.state.api1,
method: 'post',
data: formData
})
到此这篇关于使用vue插件axios传数据的Content-Type以及格式问题的文章就介绍到这了,更多相关vue Content-Type内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下2023-03-03
Vue提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue3.0多种侦听方式的相关资料,需要的朋友可以参考下2021-10-10
vue中前端如何实现pdf预览功能(含vue-pdf插件用法)
这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下2023-07-07
Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)
这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法详解
这篇文章主要介绍了vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法,结合实例形式详细描述了中文乱码问题的原因、解决方法与相关注意事项,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue移动端模态框(可传参)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家详细介绍了Vue实现无缝轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2024-01-01
这篇文章主要介绍了解决vue页面渲染但dom没渲染的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vuex获取state对象中值的所有方法小结(module中的state)
这篇文章主要介绍了vuex获取state对象中值的所有方法小结(module中的state)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论