使用axios.post链式请求上传FormData文件时payload为空如何解决

问题原因 #

• 你手动指定了Content-Type: multipart/form-data请求头但未携带boundary分隔符：当传入FormData实例作为请求体时，axios会自动生成包含正确boundary参数的请求头，手动覆盖该配置会导致boundary丢失，浏览器无法正确拆分表单字段，最终显示payload为空。
• 链式Promise回调逻辑混乱，异步执行顺序存在潜在问题，也可能引发请求序列化异常。

修正方案 #

首先删除手动设置的content-type配置项，其次理顺异步调用逻辑，推荐用async/await改写避免嵌套回调问题，修正后代码如下：

export const create = async (data) => {
  try {
    // 第一步：创建文章
    const postResponse = await api.post("/api/v1/redacao", { tema: data.tema });
    const redacaoId = postResponse.data.redacao.id;
    // 第二步：更新文章内容
    const patchResponse = await api.patch(`/api/v1/redacao/${redacaoId}`, { 
      titulo: data.titulo, 
      texto: data.conteudo 
    });
    // 第三步：存在文件时执行上传
    if (patchResponse.status === 200 && data.file) {
      const formData = new FormData();
      formData.append('file', data.file);
      // 无需手动设置content-type，axios会自动处理
      const uploadResponse = await api.post(`/api/v1/redacao/uploadRedacao/${redacaoId}`, formData);
      console.log(uploadResponse);
      return uploadResponse;
    }
    return false;
  } catch (err) {
    console.error('请求出错：', err);
    return null;
  }
}

修改说明 #

• 移除了手动配置的content-type头，axios检测到请求体为FormData实例时，会自动填充带正确boundary的multipart/form-data头
• 改用async/await改写异步逻辑，消除嵌套回调，避免异步执行顺序混乱的问题
• 统一增加了异常捕获逻辑，方便排查后续可能出现的其他请求错误

内容的提问来源于stack exchange，提问作者Danilo Oliveira