React Native中使用Axios上传多Content-Type的FormData问题

你当前的代码直接将documentInfo对象append到FormData中，会导致两个核心问题：

1. 对象会被默认序列化为字符串[object Object]，后端无法解析出有效JSON结构
2. 没有为该字段指定application/json的Content-Type，和Postman中成功的请求格式不匹配

正确实现方式 #

需要把documentInfo转为JSON字符串，再包装成指定类型的Blob对象后添加到FormData中，同时不要手动设置请求的Content-Type（让浏览器自动生成带boundary分隔符的multipart头）：

const formdata = new FormData()
// 将对象转为JSON字符串，创建Blob并指定Content-Type为application/json
const docInfoBlob = new Blob([JSON.stringify(documentInfo)], { type: 'application/json' })
formdata.append('documentInfo', docInfoBlob)
formdata.append('files', file)

// 请求配置移除手动设置的Content-Type
{
    "method": "POST",
    "data": formdata,
    "timeout": 30000,
    "url": "url"
}

关键注意事项 #

• 禁止手动设置headers里的Content-Type: multipart/form-data：浏览器会自动生成包含boundary分隔符的正确Content-Type，手动设置会丢失boundary，导致后端无法解析multipart数据
• 确保documentInfo是可JSON序列化的对象，不能包含循环引用、函数等无法被JSON.stringify处理的内容

内容的提问来源于stack exchange，提问作者Tuấn Vũ Quý