如何用React(Next.js)/Redux/Saga发送multipart form data上传图片？

1. 先解决FormData打印显示undefined的问题 #

直接console.log(formData)看不到内部内容是FormData对象的特性，不是代码错误。要查看FormData里的内容，改用以下方式：

const onUploadLogo = (e) => {
  var img = e.target.files[0]
  let formData = new FormData()
  formData.append("file", img)
  console.log('image check => ', img)
  // 正确查看FormData内容的方式
  console.log('formData file => ', formData.get('file'));
  // 或者遍历所有字段
  for (let [key, value] of formData.entries()) {
    console.log(`${key}:`, value);
  }
  // 修正传参：直接传formData，不要嵌套在对象里
  updateLogoFunc(formData)
}

2. 修正API请求的传参方式 #

你当前把FormData嵌套在{ formData }对象里传给API，后端无法正确解析Multipart数据，需要直接将FormData作为请求体发送：

• UI层：把updateLogoFunc({ formData })改成updateLogoFunc(formData)
• Saga层：此时action.values就是FormData实例，直接传给post方法，并配置正确请求头：

export function* updateLogoSaga(action) {
  try {
    yield put(setLoader(true))
    // 配置请求头处理Multipart数据
    const response = yield ApiStore.garage.post(`UpdateLogo`, action.values, {
      headers: {
        // 若使用axios，推荐让它自动检测（会自动添加boundary参数），也可手动设置
        'Content-Type': 'multipart/form-data'
      }
    })
    yield put(setLoader(false))
  } catch (error) {
    yield put(setLoader(false))
    console.error('上传失败:', error)
  }
}

3. 关键注意事项 #

• 完全依赖FormData对象处理文件，不要手动拼接Multipart数据
• 若使用axios，不手动设置Content-Type时，axios会自动识别FormData并添加正确的boundary参数，这比手动设置更可靠
• 后端接口需配置支持接收multipart/form-data类型请求，并正确解析file字段

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