使用Redux Form上传文件失败问题排查

你的后端接口经Insomnia验证可正常工作，Redux Form表单取值也正常，故障出在前端请求构造环节，共有两个核心错误：

• 手动指定Content-Type: multipart/form-data会触发Multipart: Boundary not found错误：Axios检测到请求体为FormData实例时，会自动生成带随机boundary分隔符的合法Content-Type请求头，手动写死该头会覆盖自动生成的内容，导致后端无法解析 multipart 格式的请求体。
• 请求体结构错误：你当前将FormData实例作为普通对象的image字段嵌套传递，同时平铺了其他表单字段，Axios无法识别这种混合结构，既不会正确编码普通文本字段，也无法正确上传文件内容。

接口调试参考截图：

1. 删除headers配置中手动设置的Content-Type字段，完全交给Axios自动生成。
2. 将所有待提交字段（包括title、body等普通文本字段、文件字段）全部追加到同一个FormData实例中，请求直接发送该FormData实例，不要在外层包裹普通JS对象。
3. 保证FormData中追加的字段名和后端要求的字段名完全一致，不要随意修改字段名（比如你代码里写的image字段和后端要求的imageUrl不匹配）。

export const createPost = ( formValues: any) => async(dispatch: any, getState: any) => {
  const { userId } = getState().auth;
  const token = userId

  const headers = {
    authorization: `Bearer ${token}`,
  };
  const formData = new FormData();
  // 把所有表单字段都追加到FormData中
  formData.append('title', formValues.title);
  formData.append('body', formValues.body);
  // FieldFileInput正常返回的是原生File对象，直接追加即可
  formData.append('imageUrl', formValues.imageUrl);

  try {
    // 直接传递formData作为请求体，不要嵌套在普通对象里
    const response = await AlleSys.post('/posts', formData, {headers})
    dispatch({type: CREATE_POST, payload: response.data})
    history.push('/')
  }catch (err) {
    console.log("ERROR: Couldn't post for identified user", err);
  }
};

如果修改后仍有异常，可在追加文件后打印formData.get('imageUrl')，确认返回值是原生File实例而非文件路径字符串或其他值，你已确认FieldFileInput组件运行正常，这一步通常不会出现问题。

内容的提问来源于stack exchange，提问作者Gabriel Savian