vue的axios请求改变content-type为form-data问题

这篇文章主要介绍了vue的axios请求改变content-type为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' }),
    });
};

以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。 

您可能感兴趣的文章:

• VUE项目axios请求头更改Content-Type操作
• Vue.js使用axios动态获取response里的data数据操作
• Vue-axios-post数据后端接不到问题解决
• 详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
• Vue axios 将传递的json数据转为form data的例子
• vue中axios实现数据交互与跨域问题
• 使用vue插件axios传数据的Content-Type及格式问题详解