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("操作失败，服务端出现异常错误！")
  })
}