Axios请求头中的Content-Type常见的有3种:
1.Content-Type:application/json
2.Content-Type:application/x-www-form-urlencoded
3.Content-Type:multipart/form-data
1.Content-Type: application/json
Axios中默认的请求类型,它声明了请求数据会以json字符串的形式发送。在php中,使用$_POST是接收不到的
var param = {
name: 'p',
children: {
name: 'child'
}
}
this.$axios.post(url, param)
.then(res => console.dir(res))
o
2.Content-Type:application/x-www-form-urlencoded
由于第一种类型php接收不到,所以我们要使用Axios自带的qs.stringify()对参数进行序列化,序列化后Content-Type就变成了application/x-www-form-urlencoded,它声明了请求数据会以键值对(普通表单形式)的形式发送,
通过在src目录下新建axios文件夹,文件夹中新建index.js,设置请求拦截。内容如下:
import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';//引入qs,axios在post参数时,要通过qs来格式化数据
// 添加请求拦截器
axios.interceptors.request.use(
config => {
if (config.method == 'post') {
config.data = qs.stringify(config.data);//对参数进行序列化
}
return config;
},
error => {
console.log('请求出错啦');
console.dir(error)
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error);
}
);
Vue.prototype.$axios = axios;
在main.js中引入Axios
import '@/axios';//引入axios
这样,在发送post请求时,Content-Type就会自动变成application/x-www-form-urlencoded了
但是这样做在上传图片时会有问题,接着看第3点
3.Content-Type:multipart/form-data
它一般用来上传文件,我的上传图片代码如下:
async selectedFile($event) {
let formData = new FormData();
formData.append('img', $event.target.files[0]);
this.$axios.post(url, formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then(res => console.dir(res));
},
但是由于第2步中,我们对Axios的请求进行拦截,默认对参数进行序列化了,导致Content-Type总是为pplication/x-www-form-urlencoded。这时文件就会传不到后台
因此要对src/axios/index.js进行修改:
import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';//引入qs,axios在post参数时,要通过qs来格式化数据
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 以下两种判断方式任选
if (config.headers['Content-Type'] == 'multipart/form-data') {
// if (Reflect.getPrototypeOf(config.data).constructor.name == 'FormData') {
// 请求类型 Content-Type: multipart/form-data
} else if (config.method == 'post') {
config.data = qs.stringify(config.data);
// 经过qs.stringify序列化后,请求类型变成了application/x-www-form-urlencoded
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error);
}
);
Vue.prototype.$axios = axios;
更多推荐
Axios请求中Content-Type的使用总结
发布评论