使用Axios提交文件时Payload为空问题排查求助

问题现象 #

提交文件时Payload显示为空，相关请求情况如下：

1. 请求基础信息：POST请求目标地址为/update-user，但Payload区域无任何数据
2. 网络Payload详情：未展示任何提交的表单数据内容

相关代码 #

UpdateProfileInfo( payload ) {

    const formData = new FormData();
    for ( const key in payload ) {
        formData.append( key, payload[key] );
    }

    return new Promise( async ( resolve, reject ) => {
        await axios.get( '../sanctum/csrf-cookie' );
        await axios.post('/update-user', formData, {
            'Content-Type': 'multipart/form-data'
        }).then( ( res) => {
            resolve( res.data );
        }).catch( ( error ) => {
            reject({ 'message': error.message, ...error.validation });
        });
    });
}

核心原因及解决方法 #

• 手动设置Content-Type丢失边界标识：
  使用FormData时，axios会自动生成带边界标识的Content-Type（格式为multipart/form-data; boundary=----WebKitFormBoundaryxxxx），服务器依赖这个边界解析表单数据。手动指定'Content-Type': 'multipart/form-data'会丢失边界信息，导致服务器无法识别Payload内容。
  解决：删除手动设置的Content-Type配置，让axios自动处理请求头：

  await axios.post('/update-user', formData)
  

• 传入的payload参数无效：
  检查传入的payload是否真的包含文件对象，或是存在for...in遍历遗漏属性的情况（比如payload是类实例而非纯对象、属性不可枚举）。
  解决：创建FormData前打印payload确认内容，若为类实例可转换为纯对象后再处理，例如Object.assign({}, payload)。

• axios版本或全局配置冲突：
  旧版本axios对FormData的处理可能存在兼容问题，或是全局axios拦截器修改了请求头设置。
  解决：更新axios到最新稳定版，检查全局拦截器是否有篡改请求头的逻辑。

内容的提问来源于stack exchange，提问作者Robroy Bustillo Canales