如何修改Vue中Axios请求的Content-Type为formData格式？

本文共计468个文字，预计阅读时间需要2分钟。

目录：axios请求修改content-type为form-data

内容：在使用axios进行请求时，若需要将`Content-Type`设置为`multipart/form-data`，以下是一些修改方法：

1. 正常效果： - axios请求修改`Content-Type`为`form-data`时，可以直接设置请求头。

2. 代码示例： javascript axios({ method: 'post', url: 'your-url', headers: { 'Content-Type': 'multipart/form-data' }, data: { key1: 'value1', key2: 'value2' } }) .then(response=> { console.log(response.data); }) .catch(error=> { console.error(error); });

3. 错误处理： - 若axios无法发送`Content-Type: multipart/form-data`请求，请检查以下方面： - 是否正确设置了请求头。 - 确保请求的数据格式正确。 - 检查服务器端是否支持`multipart/form-data`类型。

目录

• axios请求改变content-type为form-data
• axios无法发送‘Content-Type‘: ‘multipart/form-data‘请求
• 按照一般的写法

axios请求改变content-type为form-data

代码如下：

正常效果

axios无法发送‘Content-Type‘: ‘multipart/form-data‘请求

我这里写的是纯粹的前端解决方案

按照一般的写法

const req = (method, url, params) => {     return axios({         method: "POST",         url: url,         headers: {             'Content-Type': 'multipart/form-data',             Token: localStorage.logintoken         },         data:params,     }); };

封装完成以后你会发现后台并不能接受到你发送的数据，这是由于你发送的是request payload 但是后台做的接受是 formdata 你当然可以让你的后台小伙伴帮你修改

但是同样你可以通过qs和URLSearchParams对象的方法来解决

let params = new URLSearchParams(); //你要传给后台的key-value对 params.append('key','value');

或者

const req = (method, url, params) => {     return axios({         method: "POST",         url: url,         headers: {             'Content-Type': 'multipart/form-data',             Token: localStorage.logintoken         },         data:qs.stringify(params, { arrayFormat: 'brackets' }),     }); };

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。