使用二次封装后的axios，Formdata形式传参为空

最近有个需求在表单中添加上传文件功能，我使用input file，然后将其new了一个formdata一起传过去，但是怎么传格式都不对

报错定位

后来排查后找到原因是因为我封装了axios,对它加了限制 （❗️但是我还是不知道具体原因到底是什么，只知道这里有问题，请大佬们告知，感谢🙏） 封装如下：

import axios from 'axios'
import router from '@/router'
import {ElMessage} from 'element-plus'
// 这里要注意去vue.config.js配置代理解决跨域
const service = axios.create({
  // 将数据转换为表单数据
  transformRequest: [function (data) {
    let ret = ''
    for (const it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  // baseURL: XXXXX
  timeout: 5000
})
// 配置请求拦截器，每次请求都会携带当前localstorage的token
service.interceptors.request.use(
  (config) => {
    config.headers.token = window.localStorage.getItem('XXXX')
    console.log('request', config)
    return config
  },
  (error) => {
    return Promise.reject(new Error(error))
  }
)
// 配置统一的响应拦截器，如果返回错误信息进行提示
service.interceptors.response.use((response) => {
    console.log('response', response)
    const {
      data,
      meta,
      message,
      status
    } = response.data
    // 查验token
    if (status === 205) {
      localStorage.removeItem('XXXX')
      ElMessage({
        message: '登录状态已过期，请登录后再查看',
        type: 'warning'
      })
      router.push({ name: 'login' })
    } else if (meta.status === 200) {
      return data
      } else { // 状态错误
      ElMessage.error('Oops, ' + meta.msg) // Message提示框
      return Promise.reject(new Error(message))
    }
  },
  // 响应错误
  (error) => {
    error.response && ElMessage.error('Oops, ', error.response.data)
    return Promise.reject(new Error(error.response.data))
  }
)

export default service

解决方法

将该接口恢复为原生的axios