使用 axios 进行 post 异步提交的时候,有几个设置需要注意一下,否则发送效果会有出入。

快速预览

使用 post 提交 formData

一般来说,我们会在 axios 的配置文件中提前设置好 POST 请求的方式的 headers,如下:

1
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

偶遇需要使用 POST 方式来上传文件并且带表单数据的时候:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const fd = new FormData();
const config = {
headers: {
'Content-Type': 'multipart/form-data'
},
};
const keys = Object.keys(data);
for (let key of keys) {
fd.append(key, data[key]);
}
fd.append('file', file);
axios.post(url, fd, config)
.then(rsp=>{})
.catch(err=>{});

使用 application/x-www-form-urlencoded 格式提交

By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

1
2
3
4
5
6
7
8
9
10
11
axios.defaults.transformRequest = function(data, headers){
if (data instanceof FormData) {
return data;
}
return IrmUtil.UtilQS.stringify(data);
};
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.post(url, data, config)
.then(rsp => {})
.catch(err => {});