VUE post请求设置为formdata传参

Posted 2023-04-04

参考技术A 在vue-cli脚手架项目中，我们通常遇过发送axios请求，后台接受不到数据，试了下ajax请求，后台便可以接收到数据，对比两者的请求，发送有一点区别，就是请求参数的区别

//利用axios拦截器来进行转换，只需要转换一次

axios.interceptors.request.use(function (config)

//请求头转换为表单形式

  config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'

  config.transformRequest = [function (data)

 // 在请求之前对data传参进行格式转换

​    data = Qs.stringify(data)

​    return data

  ]

  return config

, function (error)

  return Promise.reject(error)

)

//接下来发出去的post请求就是已formdata进行传参

vue post 参数格式 form_data

参考技术A main.js

设置请求头

headers: 'content-type':'application/x-www-form-urlencoded; charset=UTF-8'

// 设置完以后 传入的params对象就会时候用formdata传参的方式

以上就是改变传参的方式，嗯。。很简单，但是光这样还不够。还需要把传入的参数转化成正常的参数而不是键值对

import qs from 'qs'

// axios自带的工具不需要安装npm依赖

axios.post(url,qs.stringify(params), headers: 'Content-Type':'application/x-www-form-urlencoded');

// 到此基本解决。。。

感谢： 参考1 & 参考2