Vue错误记录(三)文件上传之transformRequest配置导致其他接口错误

场景:在 Vue项目的man.js中封装了文件上传接口,配置transformRequest后导致其他请求接口出错。

原因: 配置transformRequest后请求数据是FormData格式,其他请求接口发送数据到后台无法解析。

解决方法:调用接口时,配置transformRequest相应的数据格式。

man.js中的接口配置

// 默认配置
import qs from 'qs';
import axios from 'axios'
axios.defaults.withCredentials = false;
axios.defaults.headers.common['token'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头
axios.defaults.transformRequest = [
  function (data) {
    return qs.stringify(data)
  }
];

var base="";//你的项目地址 https://www.baidu.cn/mis

//post接口
export const POST = (url, params) => {
    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头
	//修改transformRequest 配置,返回数据格式为json
   axios.defaults.transformRequest = [
     function (data) {
       return qs.stringify(data)
     }
   ];
  console.log(url);
  return axios.post(`${base}${url}`, params).then(res => {
    console.log(res);
    if (res.status == 200)
      return res.data;
    else
      //$Message.error("操作失败,服务端出现异常错误!")
      Message.error("操作失败,服务端出现异常错误!")
  })
}

// 文件上传接口
export const POSTFILE = (url, params) => {
    // axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;';//配置请求头
   axios.defaults.transformRequest = [
     function (data) {
       console.log("file: "+data)
     return data;
   }
   ];
  console.log(url);
  return axios.post(`${base}${url}`, params).then(res => {
    console.log(res);
    if (res.status == 200)
      return res.data;
    else
      //$Message.error("操作失败,服务端出现异常错误!")
      Message.error("操作失败,服务端出现异常错误!")
  })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值